Question

I have several divs with the same ID’s (#viewport_outer) , on hover I’m trying to show a Icon thats placed in another div (#icon-hover) ::: I’m able to get the Icon to show (opacity 1) :::

The problem is I’m not able to bind the function for every (#viewport_outer) div ::: if I hover over any div (#viewport_outer) the icon (#icon-hover) shows on the first (top) div only :::

Here’s my HTML :

<div id="viewport_outer" class="default">
    <div id="viewport">
        <div id="icon-hover"></div>
            <p> Some content ...</p>
    </div>
</div>

Here’s my jQuery, I’ve tried altering it but just cant get it working ::: Any help would be appreciated :::

jQuery('#viewport_outer.default').hover(function() {
        jQuery('#icon-hover').css({opacity:1});},
    function() {
        jQuery('#icon-hover').css({opacity:0});
})

Answer 1

IDs must be unique. Use the class-attribute instead.

<div id="viewport_outer" class="outerElement default">
    <div class="viewport">
        <div class="icon-hover"></div>
            <p> Some content ...</p>
    </div>
</div>

Javascript:

jQuery('.outerElement').hover(function() {
        jQuery(this).find('.icon-hover').css({opacity:1});},
    function() {
        jQuery(this).find('.icon-hover').css({opacity:0});
})