Question

这就是我想做的事情。我有2个相同的列表，我希望在两个列表上的特定项目悬停时同时更改颜色。

示例：

列出一个
清单项目1
清单第2项清单项目3

列出两个
清单项目1
清单第2项清单项目3

因此，如果您将鼠标悬停在List One的第一个项目上，它也会突出显示List Two的第一个项目。

对此的任何帮助都会非常感谢我的生命。 V

Answer 1

示例代码：

<style>
.active { color: red; font-weight: bold; }
</style>
<body>
<ul id="list1">
 <li>foo</li>
 <li>bar</li>
</ul>
<ul id="list2">
 <li>foo</li>
 <li>bar</li>
</ul>
<script>
(function() {
    var list1 = document.getElementById('list1'),
        list2 = document.getElementById('list2');

    function setActive(target, b) {
        if(!target.tagName.toLowerCase() === 'li') return;

        // determine position in list:
        for(var i = 0; target = target.previousSibling; ++i);

        list1.childNodes[i].className = b ? 'active' : '';
        list2.childNodes[i].className = b ? 'active' : '';
    }

    // mouseover/mouseout are bubbling, so add the listeners to parents:

    list1.onmouseover = list2.onmouseover = function(event) {
        setActive((event && event.target) || window.event.srcElement, true);
    };

    list1.onmouseout = list2.onmouseout = function(event) {
        setActive((event && event.target) || window.event.srcElement, false);
    };
})();
</script>

Answer 2

就在我的脑海中，你可以使用jquery在每个列表中选择一个特定的标签并为其应用一种风格。也许使用.addClass方法将css样式添加到两个选择列表的标记数组中的相同项目。

Answer 3

HTML

 <ul id="list1">
     <li>item 1</li>
     <li>item 2</li>
 </ul>

 <ul id="list2">
     <li>item 1</li>
     <li>item 2</li>
 </ul>

的jQuery

 $("#list1 li").hover(
         function(){
                var ind = $("#list1 li").index($(this));
               $("#list2 li:eq(" + ind + ")").addClass("highlight"); 
               $(this).addClass("highlight");
         },
         function(){
         var ind = $("#list1 li").index($(this));
              $("#list2 li:eq(" + ind + ")").removeClass("highlight");
                               $(this).removeClass("highlight");
         }
   );

突出显示类将具有您希望应用于两个列表的样式。

使用javascript悬停

3 个答案: