使用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懸停

回答

相關問題