(jQuery) 向“a”添加/删除类答案

【问题标题】：(jQuery) Add/Remove class to 'a'(jQuery) 向“a”添加/删除类
【发布时间】：2014-04-03 02:33:20
【问题描述】：

当我将其悬停时，我正在尝试将类 .hover 添加/删除到链接<a href="#" id="permalink"></a>。但它不工作！看看吧：

CSS

#content-r #right #post-outer {
 width: 264px;
 height: 264px;
 background: #1f1f1f;
 -webkit-column-break-inside: avoid;
 -moz-column-break-inside: avoid;
 column-break-inside: avoid;
 display: inline-block;
 overflow: hidden;
 color: white;
 margin-top: 11px;
 position: relative;
 margin-bottom: -5px;
 margin-right: 7px;
}

#content-r #right #post-outer a {
 padding: 0px 0px 245px 260px;
 position: relative;
 z-index: 997;
 color: white;
 margin-left: 4px;
}

#content-r #right #post-outer .body {
 position: absolute;
 padding: 0px 19px 0px 19px;
 bottom: 0;
 width: 226px;
 z-index: 997;
}

#content-r #right #post-outer .body .track{
 font-size: 20px;
 margin-bottom: -20px; 
 position: relative;
}

#content-r #right #post-outer .body .artist{
 font-size: 20px; 
 margin-bottom: -20px; 
 position: relative;
}

#content-r #right #post-outer .body .feat{
 font-size: 15px; 
 line-height: 18px; 
 margin-top: 3px;  
 position: relative;
}

.hover{
 width: 263px; 
 height: 263px; 
 background: url('https://dl.dropboxusercontent.com/u/274369538/images/body-hover.png') -1px 0px; 
 position: absolute; 
}

HTML

<div id="post-outer">
 <a href="#" id="permalink"></a>
 <div class="body">
   <div class="track">Track here</div>    
   <div class="artist">Artist here</div>
   <div class="feat">Featuring here</div>
 </div>

 <div class="image">
  <img src="MY-IMAGE-HERE" width="264" height="264">
 </div>

我尝试使用这个 jQuery，但没有成功：

$('#permalink').mouseenter(function() {
    $('#post-outer').find('a').addClass('hover');
});

谢谢！

（这是我使用这些代码的链接：http://www.comocanta.com.br/）

【问题讨论】：

似乎工作正常here？
你是否包含了 jQuery，使用 document.ready 等

标签： jquery hover addclass removeclass

【解决方案1】：

您可能还想在用户将鼠标移开时将其删除？在这种情况下，您可以使用：

jQuery(function ($) {
    $('#permalink').hover(function () {
        $('#post-outer').find('a').addClass('hover');
     }, 
     function () {
        $('#post-outer').find('a').removeClass('hover');
     });
})

【讨论】：

成功了！但仅在第一张图片上:(（查看：comocanta.com.br）
您不应多次使用相同的 id 属性。你可以给它一个类并使用它。一旦你这样做了，那么你可以像克里斯康威在另一个答案中所说的那样做，并使用 :hover 伪类来获得相同的效果。我最初将其作为我的答案的一部分，但将其删除以防您以后真的希望为其他目的添加该类。如果只是为了视觉效果，我会使用纯 CSS。
哦，我明白了！ 3abqari 在下面说了同样的话。我会在这方面工作。谢谢！

【解决方案2】：

您没有正确使用此页面上的 ID 属性。给定的 HTML 页面上不能有两个具有相同 ID 属性的元素。这就解释了为什么它只适用于第一个。您的代码需要稍作修改。也许使用类而不是 ID... 因为类属性在 HTML 页面中的两个元素中可以相同。告诉我！！！

【讨论】：

例如，这种模式在整个页面中重复...<div id="post-outer"> <a href="#" id="permalink" class=""></a> <div class="body"> </div> </div>
我会改变这个！谢谢大家。
那么您需要做的可能是将代码更改为（如果不起作用，请告诉我）：jQuery(function ($) { $('.permalink').hover(function () { $(this).find(a).addClass('hover'); }, function () { $(this).find('a').removeClass('hover'); }); })
只需将 $(".post-outer").find('a') 替换为 $(this).find('a') 使其特定于该元素，而不是通用所有具有“post-outer”类的元素
在这种情况下，当您执行 $(this).find('a') 时，它现在在其上下文中具有元素...然后您 addClass('hover') 到元素

【解决方案3】：

为什么不能只使用纯 css 来解决问题？

#permalink:hover{
    width: 263px;
    height: 263px; 
    background: url('https://dl.dropboxusercontent.com/u/274369538/images/body-hover.png') -1px 0px; 
    position: absolute; 
}

【讨论】：

【解决方案4】：

$("#permalink").on('mouseover',function(){
     $('#post-outer').find('a').addClass('hover');
});

【讨论】：