如何使用jQuery同时应用悬停和单击事件

how to apply hover and click event at the same time with jQuery

本文关键字：悬停 单击 事件 应用 何使用 jQuery      更新时间：2023-09-26

我想同时应用悬停和单击事件。我的hover()工作得很好，但当我点击div时，它不会显示任何内容。。。我在看stackoverflow上的例子，但没有找到。我希望当我点击div时，它显示的行为与在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

相关文章：