Arda Zaman Arda Zaman - 5 months ago 37
CSS Question

I can't hover only one element with Jquery

As I said in title my problem is I can't hover just one element. I gave some effect but each element is affected. I know it's a simple question and I search google and stackoverflow, I found. But any solution is working.

İn the codes are here: https://jsfiddle.net/dty0wth0/

Also I tried that too:

$("section#box").mouseenter(function() {
$('section#box span').css({'transition':'1s','top':'80px'});
}).mouseleave(function() {
$('section#box span').css({'transition':'1s','top':'-80px'});
});


Thanks for helping.

Answer

You have an addressing problem.

This hovers the div (entire image), and only works with the span.

$("section#box div").hover(
   function() {
      $('span', this).css({'transition':'1s','top':'80px'})
   }, 
   function() {
    $('span', this).css({'transition':'1s','top':'-80px'}); 
   }
);

Although, frankly, this should just use CSS transitions entirely:

section#box div {
    position: relative;
}

section#box div span {
    top: -80px;
    transition: all 1s;
    position: absolute;
}

section#box div:hover span {
    top: 80px;
}
Comments