hover - Select outer elements CSS -

can hover selector in li.options affects .image? know can done in jquery, i'm curious if it's possible pure 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> 

yes can css have change structure or use jquery or 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>