Question

我想同时应用悬停和点击事件。我的hover()工作正常，但是当我点击div时它没有显示任何内容......我正在看stackoverflow上的示例，但没有找到。我希望当我点击div时，它会向我显示与hover()

上显示的相同的行为

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 '

     });

   });

Answer 1

我以前从未需要这样做，但知道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);

当然，由于动作首先在鼠标悬停时触发，如果你没有在每个事件上增加变化，你可能看不到点击上的任何差异。

Answer 2

您只需使用：hover并点击即可实现。

使用像

这样的CSS

div#majic > h4{
color: "#404040";
}

div#majic > h4:hover, div#majic > h4.majichover{
color:"#eab000";
}

然后在你的喜欢中添加＆＃34; magichover＆＃34;上课到h4

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

2 个答案: