Multiple div with same class. How to apply JS hover effect on a particular div among them

Question

I am having same div name for multiple div (which comes in a foreach loop). Now I want to have an effect of js hover on the particular div which is touched by that time by mouse pointer .

I mean if I hover on 3rd div with the same name of other 10 div ... it apply the hover effect to the 3rd div only.

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

now my div is like that

@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

As the for-each generate multiple div it takes the first one and changed it according to the js.

Answer 1

You have to look inside the element you're hovering for what you want.

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