使用JQuery中的悬停()方法突出显示一个按钮，并结合JQuery单击按钮

Question

我有一个按钮，在一个网页上，我正在为自己，访问一个菜单，我通常已经隐藏。但是当我把鼠标悬停在上面的时候，我想让按钮突出显示。为了满足这个要求，我使用悬浮()并单击() JQuery方法。单击可以正常工作，但是当我添加悬停时，它不仅不能工作，而且还会阻止单击事件的工作。我使用的代码如下，

HTMl

<div id="menu"><input src="button.png" class="menuButton" type="image"></div>
<div id="menuBox">(MENU STUFF)</div>

CSS

#menu { 
        (position code)
      }
#menuBox {
           position: absolute; 
          (position code)
          display:none;
        }

JS

<script>
$(document).ready(
function() {
  $('#menu').click(
        function(){
            $('#menuBox').toggle();         
        });
  $('#menu').hover(
        function(){
            $(this).css({"border": "1px solid black";"box-shadow": "1px 1px 1px #000000"});
        }, function(){
            $(this).css('border', 'none');
        });
});

​

如果我单击按钮(这是#菜单id)，那么它将切换div #menuBox的显示信息。使用悬浮()方法，我改变了按钮的css，给出了阴影和边框，以显示被高亮显示的外观。

但就像我说的，这似乎行不通。有人能看到我的错误吗？

Answer 1

.menuButton:hover {
 border: 1px solid black;
 box-shadow: 1px 1px 1px #000000;
}

我知道您正在询问javascript，但在这种情况下，CSS是一个更优雅的解决方案，因为它可以处理事后插入到DOM中的元素，并且不需要通过JS增加负载。