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

csshtml

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

Best Answer

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

Related Solutions

Css – Using only CSS, show div on hover over another element

You can do something like this:

div {
    display: none;
}
    
a:hover + div {
    display: block;
}

<a>Hover over me!</a>
<div>Stuff shown on hover</div>

This uses the adjacent sibling selector, and is the basis of the suckerfish dropdown menu.

HTML5 allows anchor elements to wrap almost anything, so in that case the div element can be made a child of the anchor. Otherwise the principle is the same - use the :hover pseudo-class to change the display property of another element.

Html – Placing border inside of div and not on its edge

Set box-sizing property to border-box:

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 20px solid #f00;
    background: #00f;
    margin: 10px;
}

div + div {
    border: 10px solid red;
}

<div>Hello!</div>
<div>Hello!</div>

It works on IE8 & above.

Best Answer

Related Solutions

Css – Using only CSS, show div on hover over another element

Html – Placing border inside of div and not on its edge

Related Topic