hinzufügen Hover-Stil, um ein Kind in einer Geschwisterelement

Question

ich einige HTML/CSS haben, die etwa wie folgt aussieht:

#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>

Ich will es machen, so dass, wenn Sie über entweder schweben link wird eine CSS-Regel auf das Bild links angewendet. Ich kann den Link auf der linken Seite bekommen, aber nicht auf der rechten Seite.

Ich möchte es so machen, dass alle, die über irgendwelche Links in "#information" schweben, diese Regel auf jedes Bild anwenden, das zu "#information #left a img" passt. Was ist der beste Weg, dies zu tun? Gibt es eine Möglichkeit, dies in einer Zeile zu tun?

Answer 1

Wir konnten nicht herausfinden, wie dies mit ausschließlich CSS zu tun, deshalb unten für eine 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>

Answer 2

versuchen diese

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

Answer 3

Dies wegen der Struktur Ihrer html funktioniert nicht. Sie sagen, dass Sie den img innerhalb des hovered "a" -Tags auswählen sollen. Sie benötigen den IMG außerhalb des "a" und verwenden einen Geschwisterselektor.

Eine Geige 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>