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替代方案。

＆＃13;

(function(){
  $('#information').find('a').each(function(i, element){
    $(element).mouseover(function(){
      $('#left img').addClass("hoveredThing");
    });
    
    $(element).mouseleave(function(){
      $('#left img').removeClass("hoveredThing");
    });
  });
}());

＆＃13;

.hoveredThing { border:5px solid red; }

＆＃13;

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

＆＃13;

Answer 2

由于html的结构，这不起作用。你是说要在徘徊中选择img＆＃34; a＆＃34;标签。你需要在＆＃34; a＆＃34;之外的img。并使用兄弟选择器。

小提琴 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>

Answer 3

试试这个

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

将悬停样式添加到兄弟元素中的子项

3 个答案: