(jQuery) Add/Remove class to 'a'

Question

I'm trying to add/remove the class .hover to the link <a href="#" id="permalink"></a> when I hover it. But it's not working! Check it out:

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>

I tried to use this jQuery, but it didn't work:

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

Thanks!

(Here's the link where I'm using those codes: http://www.comocanta.com.br/)

Answer 1

You might also want to remove it when the user moves the mouse away? In that case you could use:

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

Answer 2

You are not using the ID attributes on this page correctly. You can't have two elements on a given HTML page with the same ID attribute. That explains why it's working for the first one only. Your code needs a little revising. Maybe use classes instead of IDs... since the class attribute can be the same in two elements in an HTML page. Let me know!!!

Answer 3

why can't you just use pure css to do the trick?

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

Answer 4

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