使用javascript悬停

以下是我想要做的事情。我有两个相同的列表，我想同时在两个列表上的特定项目上悬停更改颜色。使用javascript悬停

实施例：

列表中的一个
列表项1
列表项2
列表项3

列表中的两个
列表项1
列表项2
列表项目3

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

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

来源

2009-10-24 Victor

就在我头顶，可以使用jquery在每个列表中选择一个特定的标签并对其应用样式。也许使用.addClass方法将CSS样式添加到两个选择列表的标签数组中的相同项目。

来源

2009-10-24 15:33:35 Notorious2tall

示例代码：

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

来源

2009-10-24 16:10:18 Christoph

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"); 
     } 
    );

亮点类将有你想申请到这两个列表的样式。

来源

2009-10-24 20:31:39

使用javascript悬停

回答

相关问题