在JQuery中使用hover()方法突出显示一个与JQuery结合使用的按钮,点击按钮

时间:2015-07-15 22:38:06

标签: jquery

我在自己制作的网页上有一个按钮,可以访问我通常隐藏的菜单。但是当我将鼠标悬停在它上面时,我希望按钮突出显示。为了满足这个要求,我使用了hover()和click()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');
        });
});

如果我点击按钮(这是#menu id),那么它会切换div #menuBox的显示信息。使用hover()方法,我改变按钮的css,给出阴影和边框,使外观突出显示。

但就像我说的那样,它似乎不起作用。任何人都可以看到我的错误吗?

1 个答案:

答案 0 :(得分:0)

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

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