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：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

耐心是一种美德：http://davidwalsh.name/css4-preview

但不，你现在只能用CSS做到这一点。

选择外部元素CSS

2 个答案: