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

我希望能够将鼠标悬停在项目列表中的一个特定项目上并对其进行更改，而不会在将鼠标悬停在其中一个项目上时更改所有项目。我有一些“item”类的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将只选择我悬停在上面的特定项，并更改该特定项的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");
    });

}

---

使用基于上下文的搜索，如

$（this）.find（“.item button”）.css（）

如果不使用Javascript，您不能完全在css中执行此操作吗？使用CSS选择器，如

.item:hover.item按钮

。