html - 将悬停样式添加到同级元素中的子元素

Question

我有一些 HTML/CSS 看起来像这样:

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

我想做的是，当您将鼠标悬停在任一链接上时，CSS 规则将应用于左侧的图像。我可以获取左侧的链接，但无法获取右侧的链接。

我想让所有悬停在“#information”中的任何链接上的人都将此规则应用于适合“#information #left a img”的任何图像。最好的方法是什么？有没有办法在一行中完成？

Answer 1

我们无法弄清楚如何只使用 CSS 来做到这一点，因此请参阅下面的 jquery 替代方案。

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