使用javascript悬停
问题描述:
以下是我想要做的事情。我有两个相同的列表,我想同时在两个列表上的特定项目上悬停更改颜色。使用javascript悬停
实施例:
列表中的一个
列表项1
列表项2
列表项3
列表中的两个
列表项1
列表项2
列表项目3
因此,如果您将鼠标悬停在List One的第一个项目上,它也会突出显示List Two的第一个项目。
对此的任何帮助将非常感谢我的生命。 V
答
就在我头顶,可以使用jquery在每个列表中选择一个特定的标签并对其应用样式。也许使用.addClass方法将CSS样式添加到两个选择列表的标签数组中的相同项目。
答
示例代码:
<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>
答
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");
}
);
亮点类将有你想申请到这两个列表的样式。