Я новичок в jQuery, но мне трудно получить то, что я хочу. Я хочу, чтобы элемент, заключенный внутри моих <div>
и <li>
анимировал или делал то, что я проходил в нем.
Хотя я получил некоторый успех, но если у меня есть 10 div, весь мой заголовок внутри 10 div исчезнет, когда навевает только один. Это можно сделать через $(this)
но, как я уже сказал, я новичок. Следующий мой код
jQuery(document).ready(function($) {
$(".products > ul > li").on('mouseenter',function(){
//slide up h3 or div.cat-title
$(this).closest(".products")
.find(".cat-title")
.fadeIn('slow');
});
$(".products > ul > li").on('mouseleave',function(){
//slide down h3 (and hide)
$(this).closest(".products")
.find("h3")
.fadeOut('slow');
});
});
в то время как мой html
<div class="products">
<ul class="products">
<li class="product">
<a href="#">
<img width="180" height="190" alt="Beauty & Pampering" src="#">
<h3>
</a>
<div class="cat-title">Beauty & Pampering</div>
</li>
</ul>
</div>
...
$('.products > ul > li').on('mouseenter',function(){
$(".cat-title", this).fadeIn('slow');
});
...
Вы можете запускать события только под этим объектом.
Пользователь jQuery hover()
вместо on(mouseenter)
и on(mouseleave)
$('.products > ul > li').hover(function(){
$(".cat-title", this).fadeIn('slow');
},function(){
$(".cat-title", this).fadeOut('slow');
});
Пытаться
$(".products > ul > li").on('mouseleave', function () {
//slide down h3 (and hide)
$(this).closest(".product")
.find("h3")
.fadeOut('slow');
});
Вы пробовали использовать.children()?
Проверьте этот пример для демонстрации.
Попробуйте что-нибудь вроде
$('ul.products').on('mouseenter', function(){
$('div.products').children('ul').css('background','green');
});
$('div.products').on('mouseleave', function(){
$('.products').children('div').css('background','yellow');
});
И вот JS Fiddle для вашего понимания - http://jsfiddle.net/Pm2Tj/1/
Надеюсь, поможет
li
измените$(this).closest(".products")
на$(this).closest(".product")
и попробуйте