同一个类的多个div。如何将JS悬停效应应用于其中的一个特定div

Question

对于多个div，我有相同的div名称(这是在foreach循环中出现的)。现在，我希望有一个js悬停在特定的div上的效果，这个div被鼠标指针所触及。

我的意思是，如果我在第三层和其他10层一样的名字.它只对第三层适用悬停效应。

$(document).ready(function (e) {
    $(".hover").hover(function (e) {
        $("#hovsw").show();
    }, function (e) {
        $("#hovsw").hide();
    });
});

现在我的div是这样的

@foreach($questions_all as $question_each)
<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default hover">
            panel to be touched
            <div id="hovsw">
                effect of js ....
            </div>
        </div>
    </div>
</div>
@endforeach

当for-每个生成多个div时，它接受第一个div，并根据js对其进行更改。

Answer 1

你必须在元素内部寻找你想要的东西。

$(document).ready(function (e) {
    $(".hover").hover(function (e) {
        $(this).find('.hovsw').show();
    }, function (e) {
        $(this).find('.hovsw').hide();
    });
});