Выбор внешних элементов 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.