When mouse is over on a list item how to hover the list item and another div together

Question

When I get my mouse over a list item, I want it hovered and another div with it too, and reverse of this situation; when I get my mouse over #pardon div, I want it to hover and the PARDON in the list to be hovered. Sorry for English.

        <div id="sinema_wrapper_2"> 
            <div id="pardon"></div>
            <div id="propaganda"></div>
            <div id="numara"></div>
        </div>


            <ul class="filmler">
    <li>KAĞIT</li>
    <li>PARDON</li>
    <li>KOMSER ŞEKSPİR</li>
    <li>PROPAGANDA</li>
    <li>GÖKYÜZÜ</li>
    <li>14 NUMARA</li>
</ul>
        </div>`

http://jsfiddle.net/pxuky5zx/

Answer 1

You would need to create a way to bind the list item and the relevant div. CSS does not allow to do that, unless they have some common parent, which is not the case in the html you provided. I'll therefore use a bit of javascript/jquery for the sake of readability. First, fix your html

<div id="sinema_wrapper_2"> 
  <div id="pardon"></div>
  <div id="propaganda"></div>
  <div id="numara"></div>
</div>


<ul class="filmler">
 <li id="pardon-li">PARDON</li>
 <li id="propaganda-li">PROPAGANDA</li>
 <li id="numara-li">14 NUMARA</li>
</ul>

Then in javascript / jquery

$('#sinema_wrapper_2 div').hover(

function () {
   // mouseover callback
    var selector = $(this).attr('id') + '-li';
    $('.filmler li').removeClass('hover');
    $('#'+selector).addClass('hover');
},

function () {
   // mouseout callback
    $('.filmler li').removeClass('hover');
});

Here is the demo

Answer 2

You better use JavaScript for this solution. If you want to use CSS only, you have to nest the elements you want to change inside the elements that is hovered on.

I made an example: http://jsfiddle.net/zganan7w/

<ul>
 <li>Link 1 <div class="img1"></div></li>
 <li>Link 2 <div class="img2"></div></li>
</ul>