Add hover style to a child in a sibling element

Question

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?

matt · Accepted Answer · 2017-02-11T00:45:34.520

2

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>

edited Feb 11 '17 at 00:45

answered Feb 11 '17 at 00:29

matt

1,532
1
12
16

you didn't use the same HTML - the image is only in the first part... (and my answer doesn't work eith - I'm afraid it's not possible with CSS alone) – Johannes Feb 11 '17 at 00:30
@Johannes Yeah, Sorry. I misread you're question. Doesn't look like its gonna be possible without some sort of JS. I was using this [stackoverflow](http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered) as research. Might give you some inspiration. – matt Feb 11 '17 at 00:37
@Johannes Since we couldn't find an answer I just threw in some jquery. Probably better ways of doing it though. – matt Feb 11 '17 at 00:46
@Johannes Thanks. We're all just trying to help out. I suppose some people just didn't like my initial answer. – matt Feb 11 '17 at 01:06
This works for me. I was trying to do it in all CSS but it wasn't to be I guess. – pg. Feb 11 '17 at 01:15
@pg sometimes you gotta just use whatever tools work. :) – matt Feb 11 '17 at 01:22

score 2 · Answer 2 · answered Feb 11 '17 at 00:29

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>

score 0 · Answer 3 · edited Feb 11 '17 at 00:30

0

try this

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

edited Feb 11 '17 at 00:30

Michael Coker

48,577
5
44
50

answered Feb 11 '17 at 00:20

argoden

779
5
14

Add hover style to a child in a sibling element

3 Answers3