如何使用jQuery同时应用悬停和点击事件
我想同时应用悬停和点击事件。 我的hover()是完美的工作，但当我点击div它不显示任何东西...我正在看的例子在stackoverflow，但没有找到。 我希望当我点击div它会向我展示与hover()时显示的相同的行为hover()
小提琴：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>
我的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');
我正在尝试
$(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 '
});
});
我从来没有需要这样做，但知道这应该工作的jQuery：
$(id).on('mouseover', function(){
//cool stuff here
}).on('click', function(){
//other cool stuff here
});
如果它是相同的动作（看起来是这样），然后分配给一个命名函数。
function coolStuff(){
//cool stuff here
};
$(id).on('mouseover', coolStuff).on('click', coolStuff);
当然，由于该动作首先在mouseover上触发，如果不在每个事件上增加更改，您可能不会在点击上看到任何不同。
您可以通过简单地使用：悬停和单击来实现。
使用像一个CSS
div#majic > h4{
color: "#404040";
}
div#majic > h4:hover, div#majic > h4.majichover{
color:"#eab000";
}
然后在你的喜欢中加入“magichover”类到h4
链接地址: http://www.djcxy.com/p/96935.html上一篇: how to apply hover and click event at the same time with jQuery