how to apply hover and click event at the same time with jQuery
i want to apply hover and click event at the same time. my hover() is working perfectly but when i clicks on the div it don't shows anything ... i was watching examples on stackoverflow but didn't found. i want when i clicks on the div it show me the same behaviour as it showing me on hover()
fiddle : http://jsfiddle.net/gt70233f/
myHTML
<div class="col-lg-3" id="majic">
<img src="http://www.endlessicons.com/wp-content/uploads/2013/02/magic-icon-614x460.png" style="height:80px; width:80px;">
<h4>WEB APPLICATIONS</h4>
</div>
my JS
function hoveronImage(id,imageonhover,imageonhoverout){
$(id).on('mouseover',function(){
$(this).children('img').attr('src','http://icons.iconarchive.com/icons/designcon test/vintage/256/Magic-Wand-icon.png')
.next('h4').css({
'color':'#eab000 '
});
});
$(id).on('mouseout',function(){
$(this).children('img').attr('src','http://www.endlessicons.com/wp- content/uploads/2013/02/magic-icon-614x460.png')
.next('h4').css({
'color':'#404040'
});
});
}
hoveronImage('#majic','hovermajic','majic');
i was trying
$(id).on('mouseover click',function(){
$(this).children('img').attr('src','http://icons.iconarchive.com/icons/designcon test/vintage/256/Magic-Wand-icon.png')
.next('h4').css({
'color':'#eab000 '
});
});
I've never needed to do this before but knowing jQuery this should work:
$(id).on('mouseover', function(){
//cool stuff here
}).on('click', function(){
//other cool stuff here
});
If it's the same action (which it seems like it is) then assign to a named function.
function coolStuff(){
//cool stuff here
};
$(id).on('mouseover', coolStuff).on('click', coolStuff);
Of course, since the action is firing on mouseover first, if you aren't incrementing changes on each event, you probably won't see any difference on click.
You can achieve by simply using :hover and click.
Use a css like
div#majic > h4{
color: "#404040";
}
div#majic > h4:hover, div#majic > h4.majichover{
color:"#eab000";
}
Then in your like add the "magichover" class to h4
链接地址: http://www.djcxy.com/p/96936.html上一篇: 大小格式提供者