Onclick和onmouseover在一起？

Question

使用jquery，我有兴趣将 onclick 和 onmouseover 一起用于一个音量按钮（在html5播放器中找到）。

为了帮助您将其可视化，请将其视为YouTube音量按钮：

常

当您悬停时：

点击（静音）时：

在我的情况下，在 onclick 和鼠标悬停上的两个事件都可以使用，条件是您不能一起使用它们。

如果您按照以下代码添加它们，那么 onclick 事件将无效，另一个将无效。

我的代码（简化）：

//When the user clicks on the volume button 

$(".volume").on("click",function() { 

$(".volume").hide();  
$(".volume_mute").show();  

});

//When the user clicks on the volume button 
$(".volume").on("mouseover", show_volume_bar);

//show_volume is a function here which shows the volume bar
//which will make the user change the volume (doesn't interest you).

我正在使用的jQuery：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

如何使两个事件（onclick和onmouseover）在同一个按钮上一起工作？正如我所说，当我一起使用它们时，其中一个不会工作（这是onclick）。

Answer 1

您可以使用jQuery .bind()绑定多个事件。

$( ".volume" ).bind({
  click: function() {
    $(".volume").hide();  
    $(".volume_mute").show(); 
  },
  mouseover: function() {
    show_volume_bar();
  }
});

Answer 2

除了bind之外的其他解决方案只是使用.click（）和.mouseover（）函数：

$(".volume").click(function() {
    $(".volume").hide();
    $(".volume_mute").show();
}).mouseover(function() {
    show_volume_bar();
});

Answer 3

您也可以使用CSS

`HTML

 <div class="container">
<div id="transition-hover">
    <span>Transition Hover</span>
    <div id="transition-hover-content">
        This content or image is visible only when you mouse hover     the  parent div and it has transition effect.
    </div>
</div> 

CSS

#transition-hover-content {
opacity:0;   
-webkit-transition:.5s;
-moz-transition:.5s;
-o-transition:.5s;
-ms-transition:.5s;
transition:.5s;
}

#transition-hover:hover #transition-hover-content {
opacity:1;

}   
</div>    

我使用了a link

中的教程