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

select and modify specific item of the same class in jquery

本文关键字：一类 jquery 选择 修改      更新时间：2023-09-26

我希望能够悬停并更改项目列表中的特定项目，而不是当我悬停在一个项目上时更改所有项目。我有一些div类'item'。

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将只选择我悬停在上面的特定项目，并只更改该特定项目的css元素

代码如下:

$(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");
    });
}
相关文章：