Question

当我将鼠标放在列表项上时，我希望它悬停在另一个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/

Answer 1

您需要创建一种绑定列表项和相关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>

然后在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');
});

以下是demo

Answer 2

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

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

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

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

2 个答案: