将悬停状态链接到两个元素上 [英] Link the hover state on two elements

问题描述

我有一个网格中的链接列表，以及一个垂直菜单，指向这些链接。我试图链接这两组，这样当你将鼠标悬停在网格中的项目上时，菜单项也会突出显示，反之亦然。这是我到目前为止：

  / *表格* / 
 
< div class =pos-content count2>< / div> 
< div class =pos-content count3>< / div> 
 
 / *菜单* / 
< ul> 
< li class =item177>菜单连结1< / li> 
< li class =item178>菜单连结2< / li> 
< li class =item179>菜单连结3< / li> 
< / ul> 
 
< script type =text / javascript> 
 $（document）.ready（function（）{
 $（'div.count1'）。click（function（）{
 $（＃item177）。trigger（mouseover ）; 
}）; 
}）; 
< / script> 
  

相关：用一个特定的类来计算元素的数量，然后添加一个编号它们的ID

解决方案

您可以试试这个

  $（document）.ready（function（）{
 $（'div'）。hover（function（）{
 $（ul li）。eq（$（this）。 index（））。trigger（mouseover）; 
}，function（）{
 $（ul li）。eq（$（this）.index（））。trigger（mouseout ）; 
}）; 
 
 $（'ul li'）。hover（function（）{
 $（this）.css（'background-color'，' '）; 
}，function（）{
 $（this）.css（'background-color'，'white'）; 
}）; 
}）; 
  

http://jsfiddle.net/LN2VL/

I've got a list of links in a grid, and a vertical menu for those links off to the side. I'm trying to link these two sets so that when you hover over the item in the grid, the menu item will also highlight, and vice versa. Here's what I've got so far:

/* Grid */
<div class="pos-content count1"></div>
<div class="pos-content count2"></div>
<div class="pos-content count3"></div>

/* Menu */
<ul>
<li class="item177">Menu Link 1</li>
<li class="item178">Menu Link 2</li>
<li class="item179">Menu Link 3</li>
</ul>

<script type="text/javascript">
$(document).ready(function() {
    $('div.count1').click(function() {
        $("#item177").trigger("mouseover");
    });
});
</script>

Related: Count the number of elements with a specific class, then add an ID that numbers them

解决方案

You can try this

$(document).ready(function() {
    $('div').hover(function() {
        $("ul li").eq($(this).index()).trigger("mouseover");
    }, function() {
        $("ul li").eq($(this).index()).trigger("mouseout");
    });

    $('ul li').hover(function() {
        $(this).css('background-color', 'red');
    }, function() {
        $(this).css('background-color', 'white');
    });
});​

http://jsfiddle.net/LN2VL/

这篇关于将悬停状态链接到两个元素上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！