Javascript 一次又一次地在一起？

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

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

正常情况下：

当您悬停时：

单击（静音）时：

在我的例子中，两个事件onclick和onmouseover都可以工作，前提是您不同时使用它们

如果您像下面的代码一样添加它们，那么onclick事件将不起作用，另一个将起作用

我的代码（简化）：

我正在使用的jQuery：

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

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

您可以使用jQuery绑定多个事件

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

---

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

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

---

您也可以使用CSS代替

`HTML

过渡悬停
此内容或图像仅在鼠标悬停在父div上且具有过渡效果时可见。

CSS

#过渡悬停内容{
不透明度：0；
-webkit转换：.5s；
-moz转变：.5s；
-o-转变：.5s；
-ms转换：.5s；
过渡：.5s；
}
#过渡悬停：悬停#过渡悬停内容{
不透明度：1；
}   

---

我使用了本教程中的教程

您可以创建JSFIDLE或Plunk吗？

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

 <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> 

#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>