当鼠标悬停在列表项上时，如何将列表项和另一个 div 悬停在一起答案

【问题标题】：When mouse is over on a list item how to hover the list item and another div together当鼠标悬停在列表项上时，如何将列表项和另一个 div 悬停在一起
【发布时间】：2014-11-18 05:38:48
【问题描述】：

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

【问题讨论】：

标签： jquery html css hover

【解决方案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

【讨论】：

你的列表ID也需要修复，你有重复
为什么是-1？提出一个可行的答案并回答 OP 的问题？
我不明白是谁给了那个-1，但现在我正在尝试，几乎完成了，很快就会感谢你。

【解决方案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>

【讨论】：