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