選擇外部元素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>

Answer 2

忍耐是一種美德：http://davidwalsh.name/css4-preview

但是，不，現在只用CSS就無法做到這一點。