Наведите указатель мыши на javascript

Вот что я хотел бы сделать. У меня есть 2 идентичных списка, которые я хотел бы иметь цвет изменения при наведении определенного элемента в обоих списках одновременно.Наведите указатель мыши на javascript

Пример:

Список Один
Список Пункт 1
Список Пункт 2
Список Пункт 3

Список Два
Список Пункт 1
Список Пункт 2
Список Элемент 3

Итак, если вы должны навести указатель на первый элемент списка One, он также выделит первый элемент первого списка.

Любая помощь на этом спасет мою жизнь, спасибо. 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

ответ

Смежные вопросы