使鼠标悬停在一个类上会影响页面上同一类的所有其他类

发布于 2024-12-03 05:14:33 字数 589 浏览 0 评论 0原文

我希望将鼠标悬停在子导航中的列表项上，以激活页面上该类别中所有项目的类（而不仅仅是父元素或同级元素）。有什么想法吗？这是我的意思的一个例子：

<style>
img.BLUE {border:1px solid #FFF}
</style>

<ul id="subnav">
<li id="BLUE">Blue</li> <!--When hovering these...-->
<li id="PINK">Pink</li>
<li id="YELLOW">Yellow</li>
</ul>

<!--other stuff here-->

<img class="BLUE" href="image.jpg"> <!--it applies the border to this and any other img.blue on the page-->
<img class="PINK" href="image1.jpg">
<img class="YELLOW" href="image2.jpg">

原文

I'm looking to make a hover over list items in a sub nav activate a class on all of the items in that category on the page (not just parent or sibling elements). Any ideas? Here's an example of what I mean:

<style>
img.BLUE {border:1px solid #FFF}
</style>

<ul id="subnav">
<li id="BLUE">Blue</li> <!--When hovering these...-->
<li id="PINK">Pink</li>
<li id="YELLOW">Yellow</li>
</ul>

<!--other stuff here-->

<img class="BLUE" href="image.jpg"> <!--it applies the border to this and any other img.blue on the page-->
<img class="PINK" href="image1.jpg">
<img class="YELLOW" href="image2.jpg">

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

要走就滚别墨迹 2024-12-10 05:14:33

这应该做你想做的事......

<style type="text/css">
   img.active{border:1px solid #FFF;}
</style>

并且

$('#subnav li').hover(function(){
  $('.' + this.id).addClass('active');
},function(){
  $('.' + this.id).removeClass('active');
});

this should do what you want..

<style type="text/css">
   img.active{border:1px solid #FFF;}
</style>

and

$('#subnav li').hover(function(){
  $('.' + this.id).addClass('active');
},function(){
  $('.' + this.id).removeClass('active');
});

回复收藏 0 原文

方觉久 2024-12-10 05:14:33

演示

$('#subnav li').hover(function(){
    var id = $(this).attr('id');                     // grab ID of clicked el
    $('img.'+id).css({border: '1px solid #fff'});    // image class=IDname : add CSS prop.
});

DEMO

$('#subnav li').hover(function(){
    var id = $(this).attr('id');                     // grab ID of clicked el
    $('img.'+id).css({border: '1px solid #fff'});    // image class=IDname : add CSS prop.
});

回复收藏 0 原文

~没有更多了~