JQuery Mouseover и MouseOut должен работать для конкретного элемента

Question

<div class="hot_post"> 
<header> 
    <ul> 
     <li><img src="<?php echo get_template_directory_uri(); ?>/images/hot_post.png" alt="hot post"></li> 
     <li><h1>Hot Post</h1></li> 
    </ul> 
</header> 
<div class="hot_post_list"> 
    <ul> 
     <li> 
      <div class="hot_post_single"> 
       <a href="" class="hot_post_thumbnail"><img src="http://lorempixel.com/83/83" alt="post title"></a> 
       <img src="http://lorempixel.com/40/40" alt="autor_avatar" class="hot_post_avatar"> 
      </div> 
      <div class="hot_post_title">This is post for wordrpess</div> 
     </li> 
     <li> 
      <div class="hot_post_single"> 
       <a href="" class="hot_post_thumbnail"><img src="http://lorempixel.com/83/83" alt="post title"></a> 
       <img src="http://lorempixel.com/40/40" alt="autor_avatar"> 
      </div> 
      <div class="hot_post_title">This is post for wordrpess</div> 
     </li> 
     <li> 
      <div class="hot_post_single"> 
       <a href="" class="hot_post_thumbnail"><img src="http://lorempixel.com/83/83" alt="post title"></a> 
       <img src="http://lorempixel.com/40/40" alt="autor_avatar"> 
      </div> 
      <div class="hot_post_title">This is post for wordrpess</div> 
     </li> 
    </ul> 
</div> 

Это мой код. По умолчанию «hot_post_title» скрыт. Но я хочу отображать «hot_post_title», когда я наводил курсор на «hot_post_thumbnail». Если я пытаюсь показать это с помощью этого кода

$(document).ready(function() { 

    $(".hot_post_thumbnail").mouseover(function() { 
     $("hot_post_title").css("display","block"); 
    }); 

    $(".hot_post_thumbnail").mouseout(function() { 
     $("hot_post_title").css("display","none"); 
    }); 

}); 

Показаны все «hot_post_title» в ul. Мне нравится показывать только один собственный «hot_post_title» в пределах <li></li>. Например, если я нахожусь над первым <li> «.hot_post_thumbnail» Мне нравится сначала показывать «hot_post_title» в начале <li>. Затем второй для второго. Третье - третье. Не все за раз. Пожалуйста, помогите мне сделать это (используя jQuery).

Answer 1

использовать $ (это) вместо глобального класса, который, очевидно, будет влиять на все элементы с этим классом. Используя ЭТО, вы ориентируетесь на определенный элемент, который был виден.

$(".hot_post_thumbnail").mouseover(function(){ 
    $(this).parent().siblings(".hot_post_title").css("display","block"); 
    }); 

    $(".hot_post_thumbnail").mouseout(function(){ 
    $(this).parent().siblings(".hot_post_title").css("display","none"); 
    }); 

Скопируйте вставку, это должно сделать трюк.

Для установки эффекта задержки используйте show() вместо этого.

$(".hot_post_thumbnail").mouseover(function(){ 
    $(this).parent().siblings(".hot_post_title").show("100"); 
    }); 

    $(".hot_post_thumbnail").mouseout(function(){ 
    $(this).parent().siblings(".hot_post_title").hide("100"); 
    }); 

Используйте css, если вы хотите установить настройки css мгновенно.

Answer 2

вы можете использовать метод show() и hide() попробовать это:

$(".hot_post_thumbnail").mouseover(function(){ 
     $(this).closest('li').find(".hot_post_title").show(); 
     }); 

     $(".hot_post_thumbnail").mouseout(function(){ 
     $(this).closest('li').find(".hot_post_title").hide(); 
     }); 

Answer 3

Вы должны использовать $(this)

$(".hot_post_thumbnail").mouseover(function(){ 
    $(this).parent().next(".hot_post_title").show(); 
    }); 

    $(".hot_post_thumbnail").mouseout(function(){ 
    $(this).parent().next(".hot_post_title").hide(); 
    }); 

Answer 4

Использование hover в/из обработчика и toggle() метода:

DEMO

$(document).ready(function(){ 
    $(".hot_post_thumbnail").hover(function(){ 
    $(this).closest('li').find(".hot_post_title").finish().toggle(400); 
    });  
}); 

Добавить длительность для переключения (эффект).

Answer 5

Это потому, что вы выбираете каждый .hot_post_title каждый раз, когда вы показываете или скрываете его. Вместо этого вы хотите найти конкретный .hot_post_title, применимый к активированному .hot_post_thumbnail. Нечто подобное:

$('.hot_post_thumbnail').mouseover(function(){ 
    $(this).closest('li').find('.hot_post_title').css('display', 'block'); 
}); 

Это начинается с эскиза активации, проходит до общего родителя (в li элемента, а затем находит .hot_post_title в пределах этого li элемента

Answer 6

JS:.

$(".hot_post_thumbnail").hover(function() { 
    $(this).closest("li").find(".hot_post_title").show(); 
}, function() { 
    $(this).closest("li").find(".hot_post_title").hide(); 
}); 

Скрыть заголовки.

CSS:

.hot_post_title { 
    display:none; 
} 

DEMO here.

Answer 7

использование ближе он будет искать все обрабатывать, что вы смотрите и будет работать отлично подходит для вас

$('handle').closest('li').find('handle').show();