FadeIn и FadeOut детей с JQuery при наведении

Question

Я пытаюсь угаснуть в описании div, когда перехожу через родительский div .content. У меня есть пара таких элементов на моей странице, поэтому я не знаю, как реализовать children () в моем коде jQuery. Прямо сейчас, когда я наведу один .content, каждое описание исчезнет.

Вот HTML:

<div class="item">
    <div class="content">
        <div class="description">
            <p>
                <span>Super Garfield</span><br />
                <span>by myself</span>
            </p>
        </div>
        <div class="image" style="background-image: url('style/img/body-item-sample1.png')"></div>
    </div>
    <div class="view">
        1234
    </div>
    <div class="like">
        1234
    </div>
</div>

Вот jQuery:

<script>
    $(document).ready(function(){
        $(".content").hover(function(){
            $(".description").fadeIn(100); // This should set the opacity to 100% on hover
        },function(){
            $(".description").fadeOut(100); // This should set the opacity back to 30% on mouseout
        });
    });
</script>

Answer 1

Ты довольно близко. используя $(this) и .children(), вы можете выбрать элемент .description, содержащийся только в элементе, вызвавшем событие .hover(). Вот рабочий пример здесь . Код ниже.

$(document).ready(function() {
    $(".content").hover(function() {
        $(this).children(".description").fadeIn();
    }, function() {
        $(this).children(".description").fadeOut();
    });
});

Answer 2

Это один из способов.

$(document).ready(function(){
    $(".content").hover(function(){
        $(this).children(".description").fadeIn(100);
    },function(){
        $(this).children(".description").fadeIn(100);
    });
});

Надеюсь, это поможет

Answer 3

Требуется родительский селектор ">"

, например:

$(".content > .description").fadeIn(100);

http://jsfiddle.net/scpike/Crq64/