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.

Generating duplicate ids in HTML document is bad practice try classes instead — Rahil Wazir, Dec 08 '13 at 22:08
_I mean if I hover on 3rd div with the same name of other 10 div_ that is not good. — Wilfredo P, Dec 08 '13 at 22:08
[Direct vs. Delegated - jQuery .on()](http://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on) — Givi, Dec 08 '13 at 22:18
This is on foreach loop... how can I manage it . Please assist ... — Sagiruddin Mondal, Dec 08 '13 at 22:18

Bill Criswell · Accepted Answer · 2013-12-08T22:27:45.403

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();
    });
});

edited Dec 08 '13 at 22:27

answered Dec 08 '13 at 22:18

Bill Criswell

32,161
7
75
66

Cant do that . Want each div work with this js effect in every individual interactions with them. – Sagiruddin Mondal Dec 08 '13 at 22:25
I was misunderstanding you. Updating my answer. – Bill Criswell Dec 08 '13 at 22:26
1

I've updated it. Change your html from `id="hovsw"` to `class="hovsw"` since duplicate `id` attributes are not allowed. – Bill Criswell Dec 08 '13 at 22:28

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

1 Answers1