Select outer elements CSS

Question

Can a hover selector in the li.options affects the .image? I know this can be done in jQuery, but I'm just curious about if it's possible to do it with 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>

You should post your CSS as well, but to answer your question no, there is no CSS parent selector. — j08691, Apr 01 '15 at 14:33
see: http://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling could use example for image instead of div — shyamo, Apr 01 '15 at 14:38
I want to move the image, but the effect it's no really relevant. I did'n post the css because all the code it's just for styling...i couldn't figure out how to do what i'm asking for. — Paul, Apr 01 '15 at 14:58

Gildas.Tambo · Accepted Answer · 2015-04-01T23:26:09.247

Yes you can do that with css but you will have to change the structure or just 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>

score 1 · Answer 2 · answered Apr 01 '15 at 14:42

1

Patience is a virtue: http://davidwalsh.name/css4-preview

But no, you won't be able to do it with only CSS for now.

answered Apr 01 '15 at 14:42

TriangleJuice

143
6

Select outer elements CSS

2 Answers2