I need help with hover in styled components. If hover is in component and affect that component, that work. But if hover is in component and affect another component, not working.
DropDownContent not show on DropDownLi:hover.
export const DropDownLi = styled(StyledLi)`
display: inline-block;
&:hover {
color: red;
}
`;
export const DropDownContent = styled.div`
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
${DropDownLi}:hover & {
display: block;
}
/* not show on hover */
`;
Not working in next example.
export const DropDownLi = styled(StyledLi)`
display: inline-block;
&:hover ${DropDownContent} {
color: red;
}
`;
<StyledUl>
<DropDownLi>$ Currency</DropDownLi>
<DropDownContent>dvsdv</DropDownContent>
<DropDownLi>English</DropDownLi>
<StyledLi>Login</StyledLi>
</StyledUl>
Try to remove &:
export const DropDownContent = styled.div`
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
${DropDownLi}:hover {
display: block;
}
/* not show on hover */
`;
I found a solution for this problem. The code that works is below.
<StyledUl>
<DropDownLi>
$ Currency
<DropDownContent>dvsdv</DropDownContent>
</DropDownLi>
</StyledUl>
export const StyledLi = styled.li`
float: left;
cursor: pointer;
`;
export const DropDownContent = styled.div`
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
`;
export const DropDownLi = styled(StyledLi)`
display: inline-block;
`;
export const StyledUl = styled.ul`
list-style-type: none;
margin: 0;
overflow: hidden;
color: black;
${DropDownLi}:hover > ${DropDownContent} {
display: block;
}
`;
Related
Although I have updated the todo status, the checkbox effect is not working correctly, as if no effect has been applied, what could be the reason for this? I don't think there is a problem with the api file, but the api request is taking a long time.I think it's because css doesn't render again, I can't think of anything else..
Thank you for helping
import React from "react";
import { useDispatch } from "react-redux";
import { toggleTodos } from "../redux/slice/thunkActions";
import styled from "styled-components";
const Content = styled.div`
color: #fff;
text-transform: capitalize;
`;
const Options = styled.div`
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
`;
const EditButton = styled.button`
cursor: pointer;
background-color: #ff6b81;
padding: 0.7rem 2rem;
color: #fff;
border-radius: 0.5rem;
font-weight: bold;
`;
const InputWrapper = styled.label`
position: relative;
`;
const Input = styled.input`
position: absolute;
left: -99999px;
top: -99999px;
&:checked + span {
background-color: #1890ff;
transition: 1s;
&:before {
left: calc(100% - 0.2rem);
transform: translateX(-100%);
}
}
`;
const Slider = styled.span`
display: flex;
width: 5rem;
height: 2.5rem;
cursor: pointer;
border-radius: 10rem;
background-color: #fcebb6;
transition: background-color 0.4s;
&:before {
content: "";
position: absolute;
top: 0.2rem;
left: 0.2rem;
width: 2.1rem;
height: 2.1rem;
border-radius: 2.1rem;
transition: 1s;
background-color: #fff;
}
`;
const Todo = ({ todo }) => {
const dispatch = useDispatch();
const handleChange = (todo) => {
dispatch(toggleTodos(todo));
};
return (
<li>
<Content>{todo.content}</Content>
<Options>
<EditButton type="button">Edit</EditButton>
<InputWrapper htmlFor={`todoContent${todo.id}`}>
<Input
id={`todoContent${todo.id}`}
type={"checkbox"}
onChange={() => handleChange(todo)}
checked={todo && todo.isCompleted}
/>
<Slider />
</InputWrapper>
</Options>
</li>
);
};
export default Todo;
I have this 2 styled components
export const Icon = styled.svg`
width: 8px;
height: 8px;
background: black;
`
export const Dots = styled.div`
border: 2px solid green !imporant;
height: 30px;
background: white;
width: 16px;
height: 16px;
border: solid 1px #d2d2d2;
border-radius: 20px;
top: 25px;
position: relative;
${Icon}: hover {
background:black;
}
}
`
I want to display Icon on the hover of this div but i dont understand why it is not working,
Any suggestions please?
There is no problem with your code except on hover you don't change the color from its default value black
const Icon = styled.div`
width: 100px;
height: 100px;
background: black;
`;
export const Dots = styled.div`
${Icon}:hover {
background: red;
}
`;
export default function App() {
return (
<Dots>
<Icon />
</Dots>
);
}
https://codesandbox.io/s/styled-react-template-forked-nzwm8
You should place the hover styles inside the icon
export const Icon = styled.svg`
width: 8px;
height: 8px;
background: black;
&:hover {
background: black;
}
I'm trying to make the parent background color stay changed on hover as I continue to hover over the dropdown items.
https://zqy0v.csb.app/dropdowns < dropdown
import React from "react";
import styled from "styled-components";
//============================================ styles =============================================
const DivDropdownContent = styled.div`
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 24.7rem;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
`;
const DivDropdown = styled.div`
position: relative;
display: inline-block;
&:hover ${DivDropdownContent} {
display: block;
}
`;
const SpanDropdownTitle = styled.div`
font-size: 1.6rem;
font-weight: bold;
padding: 2rem 6rem;
border-radius: 0.6rem;
border: 1px solid black;
&:hover {
cursor: pointer;
}
`;
const ItemDropdown = styled.p`
padding: 1rem;
&:hover {
cursor: pointer;
background: lightgray;
}
`;
//=========================================== component ===========================================
const BasicDropdown = props => {
return (
<DivDropdown>
<SpanDropdownTitle>Basic Dropdown</SpanDropdownTitle>
<DivDropdownContent>
<ItemDropdown>Item 1</ItemDropdown>
<ItemDropdown>Item 2</ItemDropdown>
<ItemDropdown>Item 3</ItemDropdown>
</DivDropdownContent>
</DivDropdown>
);
};
export default BasicDropdown;
Basically I would like the background color to stay changed for the parent while hovering over the child items in the dropdown, much like is done here https://woocommerce.com/
Is there an easy way to do this, or do I have to start getting complicated with using state and onPointerEnter and onPointerLeave?
I finally ended up finding the solution, and am a bit embarrassed.
const DivDropdown = styled.div`
position: relative;
display: inline-block;
&:hover ${DivDropdownContent} {
display: block;
}
`;
The Issue: ^This was only targeting the nested component when I added the background cover to the hover.
const DivDropdown = styled.div`
position: relative;
display: inline-block;
&:hover {
background: lightgray;
}
&:hover ${DivDropdownContent} {
display: block;
}
`;
The Fix: ^By adding the above, I was able to correct the behavior.
I'm going to leave this question up, because I wasn't able to find much tutorials on this through my internet searching. I think this is a fairly clean solution and think it will help others searching.
I'm trying to change the nth-child(2) background color of the ColorBox element by targeting it as a child of ImgGrid but I just can't seem to get it to work, I have tried multiple variations with different elements and nothing seems to be working
This will change the background color if I don't try to target an nth-child element
const ImgGrid = styled.div`
display: flex;
flex-wrap: wrap;
flex-direction: row;
${ColorBox} {
background: #ff00ff;
}
`
How can I target the nth-child(2) of the ColorBox element?
import React from 'react'
import styled from 'styled-components'
// import Img from '../../atoms/Img'
import { array, bool } from 'prop-types'
const Wrap = styled.div`
padding: 20px 0;
`
const BoxWrap = styled.div`
position: relative;
border: 1px solid #000;
height: auto;
padding: 20px;
`
const Title = styled.div`
position: absolute;
display: flex;
align-items: center;
top: -20px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
height: 40px;
background: #f6f6f6;
padding: 10px;
`
const BoxInner = styled.div`
width: 100%;
height: 100%;
`
const ColorBox = styled.div`
height: 60px;
width: 100%;
background: #FFD700;
`
const ImgCell = styled.div`
flex: 0 0 25%;
padding: 5px;
`
const ImgGrid = styled.div`
display: flex;
flex-wrap: wrap;
flex-direction: row;
&:nth-child(2) ${ColorBox} {
background: #ff00ff;
}
`
const ImgCellInner = styled.div`
position: relative;
`
// const ImgText = styled.div`
// position: absolute;
// bottom: 0;
// left: 0;
// padding: 5px;
// width: 100%;
// background: rgba(0,0,0,0.7);
// color: #fff;
// `
const ImgWrap = styled.div`
width: 100%;
`
const ColorWrap = styled.div`
`
const Filter = ({ filterData, color }) => (
<Wrap>
<BoxWrap>
<Title>
For Women
</Title>
<BoxInner>
<ImgGrid>
{filterData.map(filter =>
<ImgCell>
<ImgCellInner>
<ImgWrap>
{color &&
<ColorWrap>
<ColorBox />
{filter.text}
</ColorWrap>
}
</ImgWrap>
</ImgCellInner>
</ImgCell>,
)}
</ImgGrid>
</BoxInner>
</BoxWrap>
</Wrap>
)
/* eslint-disable*/
Filter.propTypes = {
filterData: array,
color: bool,
}
Filter.defaultProps = {
filterData: array,
color: bool,
}
export default Filter
I can assume your code is not working because &:nth-child(2) means you are selecting ImgGrid which is second child itself. Try to specify ImgCell as nth-child(2):
const ImgGrid = styled.div`
display: flex;
flex-wrap: wrap;
flex-direction: row;
${ImgCell}:nth-child(2) ${ColorBox} {
background: #ff00ff;
}
`
I'm not sure about scoping, so probably you need to use & before:
const ImgGrid = styled.div`
display: flex;
flex-wrap: wrap;
flex-direction: row;
& ${ImgCell}:nth-child(2) ${ColorBox} {
background: #ff00ff;
}
`
If you stumble on this question looking for how to target all children elements, here is how;
const ParentDiv = styled.div`
>* {
background: white;
padding: 5px;
};
/* ...etc */
`;
I had the same problem. :focus-within in parent element worked for me, could solve your problem too.
Eg:
export const Parent = styled.div`
display: flex;
align-items: center;
border: 1px solid #000;
&:focus-within {
border: 1px solid #2ADCC6;
}
`;
export const Child = styled.input`
flex: 1;
border: none;
`;
Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within
According to styled-components doc's I can refer to another component to trigger, for example, a hover effect.
const Link = styled.a`
display: flex;
align-items: center;
padding: 5px 10px;
background: papayawhip;
color: palevioletred;
`;
const Link2 = styled.a`
display: flex;
align-items: center;
padding: 5px 10px;
background: steelblue;
color: white;
${Link}:hover & {
background-color: greenyellow;
color: black;
}
`;
class Hello extends React.Component{
render() {
return(
<div>
<Link>Hello World</Link>
<Link2>Hello Again</Link2>
</div>
)
}
}
Basically, hovering mouse on my <Link> should trigger a change in background-color in <Link2>.
This is not happening. Any ideas why?
I prepared a code snippet here: https://codesandbox.io/s/qv34lox494
You can refer to styled-components which are children of your styled-component, not side-by-side.
See a quote from the doc:
Here, our Icon component defines its response to its parent Link being
hovered
For your problem, you can create a wrapper for both of your links, and use the adjacent sibling selector in CSS like this:
const Wrapper = styled.div`
& ${Link}:hover + ${Link2} {
background-color: greenyellow;
color: black;
}
`;
https://codesandbox.io/s/mo7kny3lmx
The other way is to modify your selector on Link2 to use siblings (now it's nested item selector). In that case you can get rid of extra wrapper
const Link = styled.a`
display: flex;
align-items: center;
padding: 5px 10px;
background: papayawhip;
color: palevioletred;
`;
const Link2 = styled.a`
display: flex;
align-items: center;
padding: 5px 10px;
background: steelblue;
color: white;
${Link}:hover + & {
background-color: greenyellow;
color: black;
}
`;
class Hello extends React.Component{
render() {
return(
<div>
<Link>Hello World</Link>
<Link2>Hello Again</Link2>
</div>
)
}
}
you can do it like this. it works for many components:
const Hi0 = styled.div`
width:75px;
height:75px;
display: flex;
align-items: center;
padding: 5px 10px;
background: papayawhip;
color: palevioletred;
border-radius:50%;
`;
const Hi1 = styled.div`
width:75px;
height:75px;
display: flex;
align-items: center;
padding: 5px 10px;
background: papayawhip;
color: palevioletred;
border-radius:50%;
`;
const Hi2 = styled.div`
width:75px;
height:75px;
display: flex;
align-items: center;
padding: 5px 10px;
background: papayawhip;
color: palevioletred;
border-radius:50%;
`;
const Ind = styled.div`
width:75px;
height:75px;
border-radius:50%;
display: flex;
align-items: center;
padding: 5px 10px;
background: steelblue;
color: white;
transition:0.5s;
`;
const Wrapper = styled.div`
${Hi0}:hover ~ ${Ind} {
background: blue;
};
${Hi1}:hover ~ ${Ind} {
background: red;
};
${Hi2}:hover ~ ${Ind} {
background: yellow;
};
`;
class App extends React.Component{
render() {
return(
<Wrapper>
<Hi0>Hello World</Hi0>
<Hi1>Hello World</Hi1>
<Hi2>Hello World</Hi2>
<Ind>Hello Again</Ind>
</Wrapper>
)
}
}
export default App;
sandboxexemple