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“subject”并以这种方式进行更改。我这样做的原因是因为我在该列表中有多个项目，我希望他们每个人都做某件事。

我失败的尝试：

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

这甚至可能吗？感谢。

Answer 1

现在它只能在CSS上直接定位相关元素，所以你想要的还不可能。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

悬停时的CSS从另一个div更改图像

1 个答案: