css - 选择外部元素 CSS

Question

li.options 中的悬停选择器会影响 .image 吗？我知道这可以在 jQuery 中完成，但我只是想知道是否可以使用纯 CSS 来完成。

<nav class="menu">
    <ul class="list">
        <li class="option"><a href="#">OPTION 1</a></li>
        <li class="option"><a href="#">OPTION 2</a></li>
        <li class="option"><a href="#">OPTION 3</a></li> 
        <li class="option"><a href="#">OPTION 4</a></li>
    </ul>
</nav>
<div id="image_set">
    <div class="image image1"></div>
    <div class="image image2"></div>
    <div class="image image3"></div>
    <div class="image image4"></div>
</div>

Answer 1

是的，你可以用 css 做到这一点，但你必须改变结构或者只使用 jQuery 或 Javascript:

$(".list li").hover(function(){
    var index = $(this).index() + 1;
    $(".image").removeClass("active");
    $("#image_set .image:nth-child(" + index + ")").addClass("active")
})

.image{
  width: 50px;
  height: 50px;
  margin: 4px; 
  float: left;
  border: 1px solid black;
}
.active{background: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="menu">
    <ul class="list">
        <li class="option"><a href="#">OPTION 1</a></li>
        <li class="option"><a href="#">OPTION 2</a></li>
        <li class="option"><a href="#">OPTION 3</a></li> 
        <li class="option"><a href="#">OPTION 4</a></li>
    </ul>
</nav>
<div id="image_set">
    <div class="image image1"></div>
    <div class="image image2"></div>
    <div class="image image3"></div>
    <div class="image image4"></div>
</div>