- This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
Viewing 8 posts - 1 through 8 (of 8 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
here’s the link – http://codepen.io/Phe0nix/pen/VPGgLy
html
css
.block,.block1{
background: red; width: 100px; height: 100px;
}
.block:hover .block1{
background: green;
}
hover not working..but when i put a parent element like this
---two div elements---
<!-- section end-->
now it’s working…is there any way to do that?
Do you mean .block1:hover { ... }
?
We’d need a CodePen demo to be sure.
no..i want .block:hover .block1
@Beverleyh here’s the link – http://codepen.io/Phe0nix/pen/VPGgLy
I suppose you’re looking for the adjacent sibling selector:
.block:hover + .block1{
background: green;
}
so @Shikkediel, “~” and “+” are same..because if i put “~” this, instead of +, then it’s also working..
Not exactly, +
will only select the next sibling where ~
will select all siblings.
They may behave the same in this case, but they are different;
“+” = adjacent sibling selector https://css-tricks.com/almanac/selectors/a/adjacent-sibling/
“~” = general sibling selector https://css-tricks.com/almanac/selectors/g/general-sibling/
thanks @Beverleyh and @Shikkediel