jquery - 多悬停高亮

Question

我有一个想法，一种给用户反馈的方法 我喜欢将鼠标悬停在菜单上，这将突出显示与菜单相对应的 img 或者相反，将鼠标悬停在图像上将突出显示菜单

我认为它可以用 jquery 来完成，但是它可以用纯 css 来完成吗？或者你有一个例子或代码我可以根据我的想法

谢谢

Answer 1

据我所知，在 jQuery 中你有一个菜单和一些图像:

<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
</ul>

...

<img src="/img1.jpg" />
<img src="/img2.jpg" />

首先你需要一些东西来链接两者，比如一个类或者rel引用

<ul>
<li><a href="#" rel="img1">item 1</a></li>
<li><a href="#" rel="img2">item 2</a></li>
</ul>

...

<img src="/img1.jpg" id="img1" />
<img src="/img2.jpg" id="img2" />

然后使用 jQuery，您可以在翻转时向元素添加一个类

$(function(){
    $('li a').bind('mouseenter mouseleave',function(e){
        $(this).toggleClass('highlight');
        $('#'+$(this).attr('rel')).toggleClass('highlight');
    });
    $('img[id^=img]').bind('mouseenter mouseleave',function(e){
        $(this).toggleClass('highlight');
        $('a[rel='+$(this).attr('id')+']').toggleClass('highlight');
    });
});

你可以使用任何东西作为标识符使用 .text() 或 .atrr('src') 突出显示类将包含鼠标悬停的样式，对于菜单和图像，无论是使用 li .hightlight 和 img .highlight 还是使用不同的类，这显然都不同。