CODEWITHSUNDEEP
jquerymouseover
Mubeen
Mubeen

Reputation: 2492

JQuery mouseover issue

I am using the following script and there is placeholder div. when i mouseover the div play button should come over the placeholder.

I have three placeholder in a row. When I mouseover the one particular placeholder, all the play button appears. What I need is when i mouseover the placeholder only that play image should appear.

Hope you can understand my question. Could anyone please help me to do this?

jQuery.noConflict();
       jQuery(function(){
        jQuery('.placeholder').mouseover(function(){
               jQuery('.play').show('show');
        });
        jQuery('.placeholder').mouseleave(function(){
               jQuery('.play').hide('hide');
        });
      });

HTML:

 <div class="placeholder item"><div class="play"><img src="images/play_ico.jpg"></div></div>
 <div class="placeholder item"><div class="play"><img src="images/play_ico.jpg"></div></div>
 <div class="placeholder item"><div class="play"><img src="images/play_ico.jpg"></div></div>

CSS:

.placeholder{
    width:120px;
    float:left;
    background:#ccc;
    height:67px;
    position:relative;
}

.play{
    width:120px;
    height:67px;
    position:absolute;
    top:0;
    left:0;
    display:none;
    background:#000;
    opacity:0.4;
filter:alpha(opacity=40);
}

Upvotes: 2

Views: 1802

Answers (3)

adeneo
adeneo

Reputation: 318162

Are you sure you're doin this right, and do you really need to use noConflict ?

jQuery(function(){
    jQuery('.placeholder').on({
        mouseenter: function(){
           jQuery('.play', this).show('slow');
        },
        mouseleave: function() {
           jQuery('.play', this).hide('slow');
        }
    });
});

or just

jQuery('.placeholder').on('mouseenter mouseleave', function() {
    jQuery('.play', this).toggle();
});

Upvotes: 2

Ram
Ram

Reputation: 144659

Try the following:

    jQuery('.placeholder').mouseenter(function(){
           jQuery(this).find('.play').show();
    });
    jQuery('.placeholder').mouseleave(function(){
           jQuery(this).find('.play').hide();
    });

as an alternative you can use hover method:

    jQuery('.placeholder').hover(function() {
           jQuery(this).find('.play').show();
    }, function() {
           jQuery(this).find('.play').hide();
    })

Upvotes: 5

nebulae
nebulae

Reputation: 2665

off the top of my head, I don't think that 'show' and 'hide' are valid params to pass to the show and hide functions, unless you're using custom animations by those names?

try just 

jQuery('.play').show();

and 

jQuery('.play').hide();

unless you want them to animate in and out, then use 

jQuery('.play').show('slow');

and 

jQuery('.play').hide('slow');

or the equivalent :)

http://api.jquery.com/show/

Upvotes: 0

Related Questions