（jQuery）将类添加/删除到'；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(function ($) {
    $('#permalink').hover(function () {
        $('#post-outer').find('a').addClass('hover');
     }, 
     function () {
        $('#post-outer').find('a').removeClass('hover');
     });
})

---

您没有正确使用此页上的ID属性。给定HTML页面上不能有两个具有相同ID属性的元素。这就解释了为什么它只对第一个有效。你的代码需要修改一下。可能使用类而不是ID。。。因为类属性在HTML页面的两个元素中可以相同。让我知道

为什么你不能用纯css来做这个把戏呢

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

---

似乎工作正常？您是否包括jQuery，使用document.ready etcIt工作正常！但仅在第一张图片上：（（请查看：）你不应该多次使用同一个id属性。你可以给它一个类，然后改为使用它。一旦你这样做了，你就可以按照Chris Conway在另一个答案中所说的做，并使用

：hover

伪类来获得相同的效果。我最初把它作为我的答案的一部分，但如果你真的想要类以后添加是为了另一个目的。如果只是为了视觉效果，那么我会使用纯CSS。哦，我明白了！3abjari在下面说了同样的话。我会处理这个。谢谢！例如，这个模式在整个页面中重复…

我会更改它！Thaks for all。然后你需要做的是更改t他编写了以下代码（如果不起作用，请告诉我）：

jQuery（function（$）{$（'.permalink'）.hover（function（）{$（this.find（a）.addClass（'hover'）；}，function（）{$（this.find（'a'））.removeClass（'hover'）；}）

只是将$（“.post outer”）.find（'a'）替换为$（this.find（'a'））使其特定于该元素，而不是在本例中，当您执行$（this）时，对类为“post outer”的所有元素都是泛型的。find（'a'）现在在其上下文中有该元素……然后将class（'hover'）添加到元素中

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

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