Arda Zaman Arda Zaman - 7 months ago 41
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:

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.


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;