我在自己制作的网页上有一个按钮,可以访问我通常隐藏的菜单。但是当我将鼠标悬停在它上面时,我希望按钮突出显示。为了满足这个要求,我使用了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,给出阴影和边框,使外观突出显示。
但就像我说的那样,它似乎不起作用。任何人都可以看到我的错误吗?
答案 0 :(得分:0)
.menuButton:hover {
border: 1px solid black;
box-shadow: 1px 1px 1px #000000;
}
我知道你在询问javascript,但在这种情况下CSS是一个更优雅的解决方案,因为它可以在事后插入DOM的元素上工作,并且不需要通过JS增加负载。