懸停CSS更改另一個div的圖像

Question

HTML部分

   <div class="test">
      <ul>
         <li class="yeah"><a href="#">Link 1</a></li> 
    </div>

    <div class="subject">
      <p>hello</p>
    </div>

的CSS

.test:hover + .subject{
  background-color:green;
}

因此，如果我這樣做，它會起作用。 但是，我真正想做的是使用列表中的項目定位div“主題”並以這種方式進行更改。 之所以這樣做，是因為在該列表中我將有多個項目，並且我希望每個人都做某件事。

我失敗的嘗試：

.test li.yeah:hover + .image{
  background-color:green;
}

這有可能嗎？ 謝謝。

Answer 1

現在，只能將直接相關的元素作為CSS上的目標，因此您還無法實現所需的目標。

使用jQuery可以輕松完成的javascript：

 $sub = $('.subject'); $('.yeah').on({ mouseenter: function() { var i = $(this).index(); $sub.addClass('li-'+i); }, mouseleave: function() { $sub.removeClass().addClass('subject'); } }) 

 .li-0{ background-color:green; } .li-1{ background-color:red; } .li-2{ background-color:blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test"> <ul> <li class="yeah"><a href="#">Link 1</a></li> <li class="yeah"><a href="#">Link 1</a></li> <li class="yeah"><a href="#">Link 1</a></li> </ul> </div> <div class="subject"> <p>hello</p> </div>