CSS Hover over something and have a completely different div change its attribute

Question

im trying to write a code where you hover over a div and have a completely different div change its effect

heres my code

html

    <div class="a">LOREM IPSUM</div>
    <div class="boxhighlight"></div>

css

    .a:hover, .boxhighlight
    {
        background-color:black;
    }

what i want to happen is that when the user hovers over the word lorem ipsum, the div boxhighlight will change its background color

is there a way to do this?

thanks

Yes ,There is easy way to do it, But please first try Google, and plz tell what u have tried. — ameya rote, Dec 27 '12 at 13:20
http://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling — Ladineko, Dec 27 '12 at 13:22
there are already a lot of questions like this. try googling and see stackoverflow faqs — Praveen Puglia, Dec 27 '12 at 13:30
possible duplicate of [Is there any way to hover over one element and effect a different element?](http://stackoverflow.com/questions/6867257/is-there-any-way-to-hover-over-one-element-and-effect-a-different-element) or http://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling — feeela, Dec 27 '12 at 13:49

score 4 · Answer 1 · edited May 23 '17 at 11:58

4

Use like this

<div class="a">LOREM IPSUM</div>
<div class="boxhighlight" >asdf</div>

Your css

.a:hover ~ .boxhighlight  {
background-color:black;
color: white;
}

See this for your Reference

See example in this Fiddle

edited May 23 '17 at 11:58

Community

answered Dec 27 '12 at 13:31

Dineshkani

Excellent answer plz explain ~ meaning – ameya rote Dec 27 '12 at 13:38
1

Because, general sibling combinator (~) selects that element any where eg: http://jsfiddle.net/Dineshkani/bJZJW/. If they want the adjacent element then use adjacent sibling combinator (+). So it highlight only the div which is adjacent to it eg:http://jsfiddle.net/Dineshkani/fb59w/. Use combinator what they want of own dependency – Dineshkani Dec 27 '12 at 13:44

Licson · Answer 2 · 2012-12-27T13:42:31.540

0

Change the selector to this:

.a:hover + .boxhighlight {
    background-color:black;
}

The selector changes the styles of the element that has class boxhighlight that next to .a when hovered.

edited Dec 27 '12 at 13:42

answered Dec 27 '12 at 13:24

Licson

there are reasons why this way of styling is not used. in short, this is a bad practice – Praveen Puglia Dec 27 '12 at 13:31
I think i typed the wrong code before but now corrected. – Licson Dec 27 '12 at 13:36

2 Answers2