JQuery，如何对具有相同类的多个div应用相同的鼠标悬停效果？请帮忙？

发布于 2024-09-24 02:32:57 字数 474 浏览 8 评论 0原文

我是 jQuery 新手，我遇到了一些翻转问题，我试图将相同的“翻转”效果应用于多个 div，并且它似乎有效，唯一的事情是当我翻转一个元素时，所有 div 都会得到同样的效果，当我希望他们在鼠标悬停时一次应用一个效果时，这是我的代码，

  $('div.pitem').bind('mouseenter mouseleave', function() {
  $('div.p-tab').toggleClass('pheader-bar-selected');
  });
  $('div.pitem').bind('mouseenter mouseleave', function() {
  $('div.p-fline').toggleClass('pfooter-bar-selected');
  });

我确实意识到我的所有 div 上都有相同的类，但我希望找到一种方法来做到这一点如果不给每个 div 一个独特的类或 id，任何帮助都会很棒，谢谢！

原文

i am new to jQuery and i am having some rollover issues, i am trying to apply the same "roll over" effect to multiple divs, and it seems to work, the only thing is when i roll over an element all of my divs get the same effect, when i would like them to apply the effect one at a time on mouse over, here is my code

  $('div.pitem').bind('mouseenter mouseleave', function() {
  $('div.p-tab').toggleClass('pheader-bar-selected');
  });
  $('div.pitem').bind('mouseenter mouseleave', function() {
  $('div.p-fline').toggleClass('pfooter-bar-selected');
  });

I do realize that i have the same classes on all of my divs but i was hoping to find a way to do this with out giving every single div a unique class or id, any help would be amazing thank you!

分享到QQ

分享到微博

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

发布评论

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

呆头 2024-10-01 02:32:57

你可以看看$(this)。

解释于：http://remysharp.com/2007/04/12/ jquerys-this-demystified/

下面是我如何使用它给你一个例子

// megalink hover
$("div.megalink").hover(function(){
    $(this).css('background','#e1eefd');
    $(this).css('border-bottom','1px solid #0470B8');
 }, function(){
    $(this).css('background','#ffffff');
    $(this).css('border-bottom','1px solid #EBE7DE');
});

You might take a look at $(this).

Explained at: http://remysharp.com/2007/04/12/jquerys-this-demystified/

Here is how I use it to give you an example

// megalink hover
$("div.megalink").hover(function(){
    $(this).css('background','#e1eefd');
    $(this).css('border-bottom','1px solid #0470B8');
 }, function(){
    $(this).css('background','#ffffff');
    $(this).css('border-bottom','1px solid #EBE7DE');
});

回复收藏 0 原文

各空 2024-10-01 02:32:57

您当前正在做的是，每次悬停时，您都会在 div.p-tab 选择的所有元素上切换 CSS 类，这些元素将是具有 CSS 类 p-tab 的任何 DIV。

您想要做的只是在 HTML 结构 div.pitem 中悬停元素旁边的元素上切换 CSS 类。

要查找当前悬停的项目，请在您的事件中使用 this 关键字，并使用 $(this) 将其转换为 jQuery 对象。要查找紧邻（相邻）的元素，您将使用 siblings 函数。您还可以组合两个悬停事件。

$('div.pitem').bind('mouseenter mouseleave', function() { 
    $(this).siblings('div.p-tab').toggleClass('pheader-bar-selected');
    $(this).siblings('div.p-fline').toggleClass('pfooter-bar-selected');
}); 


<div class="grid_3 portfolio-item">
    <div class="p-tab pheader-bar">
        <span class="tfm-drpa">»</span>
    </div>
    <div class="pitem">
        <a href="#"></a>
    </div>
    <h2 class="pcontent">Consectetuer Adipiscing Elit<span class="ptitlelines">///</span></h2>
    <div class="p-fline pfooter-bar"></div> 
</div>

What you are doing currently is on every hover you toggle the CSS class on all elements selected by div.p-tab, which will be any DIV with the CSS class p-tab.

What you want to do is only toggle the CSS class on elements next to the hovered element in your HTML structure div.pitem.

To find the currently hovered item, in your event use this keyword, and turn it into a jQuery object by using $(this). To find elements next to (adjacent) you will use the siblings function. You can also combine your two hover events.

$('div.pitem').bind('mouseenter mouseleave', function() { 
    $(this).siblings('div.p-tab').toggleClass('pheader-bar-selected');
    $(this).siblings('div.p-fline').toggleClass('pfooter-bar-selected');
}); 


<div class="grid_3 portfolio-item">
    <div class="p-tab pheader-bar">
        <span class="tfm-drpa">»</span>
    </div>
    <div class="pitem">
        <a href="#"></a>
    </div>
    <h2 class="pcontent">Consectetuer Adipiscing Elit<span class="ptitlelines">///</span></h2>
    <div class="p-fline pfooter-bar"></div> 
</div>

回复收藏 0 原文

~没有更多了~