Question

我希望能够将鼠标悬停在更改项目列表中的特定项目，而不会在我将鼠标悬停在其中时更改所有项目。我有一些关于课程＆＃39;项目的div。

function itemHover(){

    $(".item").mouseenter(function(){
        $(this).fadeIn();
        $(".item-button").css("opacity","1");
        $(".description").css("visibility","visible");
        $(".description").css("opacity","1");
        $(".image-container").css("opacity","0.1")
    })

    $(".item").mouseleave(function(){
        $(".item-button").css("opacity","0");
        $(".description").css("visibility","hidden");
        $(".description").css("opacity","0");
        $(".image-container").css("opacity","1")
    })

}

HTML：

<div class="item">               

    <a href="http://www.google.com">
        <div class="image-container"></div>
        <div class="title">
            Macbook Pro 15" retina with case and cover
        </div>
        <div class="price">
            £99999999999999
        </div>
        <div class="description">
            <p>MacBook Pro witht.</p>
        </div>
        <div class="item-button">
           Buy this
        </div>
    </a>
</div>

什么Jquery只会选择我悬停的特定项目并更改该SPECIFIC项目的元素css而只会更改。

Answer 1

以下是代码：

$(itemHover);

function itemHover(){

    $(".item").mouseenter(function(){
        $(this).fadeIn()
        .find(".item-button").css("opacity","1").end()
        .find(".description").css("visibility","visible")
        .(".description").css("opacity","1").end()
        .find(".image-container").css("opacity","0.1");
    });

    $(".item").mouseleave(function(){
        $(this)
        .find(".item-button").css("opacity","0").end()
        .find(".description").css("visibility","hidden")
        .(".description").css("opacity","0").end()
        .find(".image-container").css("opacity","1");
    });

}

在jquery中选择和修改同一个类的特定项

1 个答案: