链接两个元素的悬停状态答案

【问题标题】：Link the hover state on two elements链接两个元素的悬停状态
【发布时间】：2012-07-19 16:20:54
【问题描述】：

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

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

【问题讨论】：

标签： jquery hyperlink hover

【解决方案1】：

没有尝试过，但这可能有效：

$('.count1').hover(function(){
    $('#item77').addClass('highlight');
}, function(){
    $('#item77').removeClass('highlight');
});

【讨论】：

【解决方案2】：

你可以试试这个

$(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/

【讨论】：

感谢您填写这些缺失的部分。如果将来添加或重新排序新项目，我必须修改您的代码以更具体。但我仍然无法扭转这种方法。当链接悬停时，我还需要网格突出显示。 jsfiddle.net/LN2VL/19