I have the following HTML:
<div class="wraper">
<div class="elementA"></div>
<div class="elementB"></div>
<div class="elementC"></div>
</div>
I need change background-color of elementA when we hover on elementC. I've tried a lot of CSS examples but no success.
How I can do it by just using CSS? No JavaScript or JQuery.
it can be done with just CSS, although there are some limitations that might prevent you using it. I moved the :hover to the parent and turned off pointer-events on elementB. Unfortunately, this means for IE, IE11+ will be required. Chrome and Firefox have good support already. I also had to reset the background-color on elementA otherwise the color is also modified when hovering on elementA. Lastly, your markup and other CSS on your real page might be different, which could also prevent this being a good solution.
There is no other way I can think of to do this in CSS, so if this doesn't fit your requirements, then JavaScript is the only solution.
HTML
<div class="wrapper">
<div class="elementA">A</div>
<div class="elementB">B</div>
<div class="elementC">C</div>
</div>
CSS
.wrapper:hover .elementA {
background-color:red;
}
div {
width:20px;
height:20px;
}
.wrapper div {
border:1px dashed lightskyblue;
}
.elementB {
pointer-events:none;
}
.wrapper .elementA:hover {
background-color:white;
}
You can not select a sibling that is before the selector.
However there's 2 possible solutions, either to do it with Javascript or you can simply re-order your elements in a postion which allows you to select then, re-order it's positions again by setting Position: Absolute;
If you want to do this in plain CSS, it's going to be difficult, but not impossible. You could play with floats (horizontal) or probably more dynamic, absolute elements. Of course you need to have a known width/height for the elements to position them right.
HTML:
<div class="wrapper">
<div class="elementC"></div>
<div class="elementA"></div>
<div class="elementB"></div>
</div>
CSS (without position values).
.wrapper {
position:relative;
}
.wrapper>div {
position:absolute;
}
.elementC:hover+.elementA {
background-color:#333;
}
With position values (top, right, bottom, left) you can change the visible positions of the elements. The plus symbol select the next element after the previous selected.
elementC before elementAYes, you can do only with CSS, but 'elementA' MUST be AFTER 'elementC' Here's the code
.elementC:hover ~ .elementA {
color: #ccc /* example */
}
And here's the documentation of the General Sibling Selector
wrapper{ background:black;}
.elementA {
display: block;
width: 100%; background:blue;
height: 50px;
}
.elementB {
display: block;
color: #ffffff;
background-color:red;
text-align: center;
width:100%;
padding: 10px;
}
.elementC {
display: block;
color: #ffffff;
background-color:pink;
text-align: center;
width:100%;
padding: 10px;
}
.elementA:hover + .elementC + .elementB {
display: block;
background:green;
}
