当鼠标在列表项上结束时如何将列表项和另一个div放在一起

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上,并且反过来这种情况;当我把鼠标放在#pardon div上时,我希望它悬停,列表中的PARDON要悬停。对不起英文。

        <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/

2 个解决方案

#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的方法。 CSS不允许这样做,除非他们有一些共同的父级,这在你提供的html中并非如此。因此,为了便于阅读,我会使用一些javascript / jquery。首先,修复你的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

然后在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

这是演示

#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.

您最好使用JavaScript来实现此解决方案。如果您只想使用CSS,则必须将要更改的元素嵌套在悬停的元素中。

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

我做了一个例子:http://jsfiddle.net/zganan7w/

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

#1

<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>