Change another div on hover using only css

Asked Jan 20 '18 at 10:41

Active Jan 20 '18 at 10:50

Viewed 69 times

I want to change background of div when i hover my link. How can i achieve this? Currently my code looks like this, but it is not working:

<div class="row">
  <div class="col-md-12" style="margin-left: 40px; margin-top: 5px;">
     <a id="test" href="">
        <div id="test1" class="col-xs-2 button-left">
           <img class="button-img" src="{{ asset('/img') }}"></img>
        </div>
       <div class="col-xs-5 button-right">
          <h3 style="margin-top: 10px; text-align: center;">@lang('main.data')</h3>
       </div>
    </a>
</div>

#test:hover ~ #test1 {
    display: none;
}

#test:hover>#test1 {
  background: red;
}

<div class="row">
  <div class="col-md-12" style="margin-left: 40px; margin-top: 5px;">
    <a id="test" href="">
      <div id="test1" class="col-xs-2 button-left">
        <img class="button-img" src="{{ asset('/img') }}"></img>
      </div>
      <div class="col-xs-5 button-right">
        <h3 style="margin-top: 10px; text-align: center;">@lang('main.data')</h3>
      </div>
    </a>
  </div>
</div>

edited Jan 20 '18 at 10:50

Pedram

15,766
10
44
73

asked Jan 20 '18 at 10:41

Promgrma

`#test:hover > #test1{}` – Satpal Jan 20 '18 at 10:44
1

Even no need `>` because it's the only one, also it's children not siblings. – Pedram Jan 20 '18 at 10:45
Ok that works, but only with display:none, but not with background: red and i need bg – Promgrma Jan 20 '18 at 10:45
@Promgrma It also works with `background` – Pedram Jan 20 '18 at 10:47
#test:hover > #test1 { background: red; } and nothing happens – Promgrma Jan 20 '18 at 10:49
https://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling check this link. You will get idea. – Foramkumar Patel Jan 20 '18 at 10:50
@Promgrma See the snippet on your post. – Pedram Jan 20 '18 at 10:50
Why this can't work on my page? – Promgrma Jan 20 '18 at 10:52
@Promgrma Hard to say, you should inspect. But possible: 1. Override background with `background: red!important` 2. check and sure if it is children. – Pedram Jan 20 '18 at 10:59
important works :) thanks! – Promgrma Jan 20 '18 at 11:00
@Pedram another question.. how can i change that h3 color on the same hover? Edit: ok i know, thanks – Promgrma Jan 20 '18 at 11:01
@Promgrma Something like this `#test:hover > .button-right h3` – Pedram Jan 20 '18 at 11:04

Change another div on hover using only css

0 Answers0