CODEWITHSUNDEEP
htmlcsshover
pg.
pg.

Reputation: 2531

Add hover style to a child in a sibling element

I have some HTML/CSS that looks something like this:

#left a:hover img {
  border: 5px solid red;
}
<div id="information">
  <div id="left">
    <a href="URL">
      <img src="IMG">
      <span id="button">CLICK</span>
    </a>
  </div>
  <div id="right">
    <a href="URL">CLICK</a> 
  </div>
</div>

I want to make it so that when you hover over either link, a CSS rule is applied to the image in left. I can get the link on the left, but not the right.

I want to make it so that all hovering over any links in "#information" will apply this rule to any image that fits "#information #left a img". What's the best way to do this? Is there a way to do it in one line?

Upvotes: 0

Views: 60

Answers (3)

matt
matt

Reputation: 1753

We weren't able to figure out how to do this with exclusively CSS, therefore see below for a jquery alternative.

(function(){
  $('#information').find('a').each(function(i, element){
    $(element).mouseover(function(){
      $('#left img').addClass("hoveredThing");
    });
    
    $(element).mouseleave(function(){
      $('#left img').removeClass("hoveredThing");
    });
  });
}());
.hoveredThing { border:5px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="information">  
    <div id="left">
        <a href="URL">
            <img src="img" >
            <span id="button">CLICK</span>
        </a>
    </div>
    <div id="right">
        <a href="URL">
          CLICK
        </a>                                             
    </div>
</div>

Upvotes: 2

Aleksander Rezen
Aleksander Rezen

Reputation: 927

try this 

 #information div a:hover img{border:5px solid red;}

Upvotes: 0

RoboYak
RoboYak

Reputation: 1482

This doesn't work because of the structure of your html. You are saying to select the img inside the hovered "a" tag. You need the img outside of the "a" and use a sibling selector.

A fiddle https://jsfiddle.net/05jwnw7v/

#information a:hover~img{border: 1px solid red;}

<div id="information">  
     <div id="NewContainer">
         <a href="URL">CLICK</a> 
         <a href="URL">           
             <span id="button">CLICK</span>
         </a>
         <img src="IMG" >
    </div>
</div>

Upvotes: 2

Related Questions