我不想使用以下HTML,CSS和javascript动态更改div的背景颜色。 HTML:
<div id="menu">
<div class="menuItem"><a href=#>Bla</a></div>
<div class="menuItem"><a href=#>Bla</a></div>
<div class="menuItem"><a href=#>Bla</a></div>
</div>
CSS:
.menuItem{
display:inline;
height:30px;
width:100px;
background-color:#000;
使用Javascript:
$('.menuItem').hover( function(){
$(this).css('background-color', '#F00');
},
function(){
$(this).css('background-color', '#000');
});
编辑:我忘了说我有理由不想使用css方式。
我确实忘了检查DOM是否已加载。
答案 0 :(得分:51)
您的代码对我来说很好。
使用jQuery的$(回调)函数确保在javascript执行之前DOM已准备就绪:
$(function() {
$('.menuItem').hover( function(){
$(this).css('background-color', '#F00');
},
function(){
$(this).css('background-color', '#000');
});
});
答案 1 :(得分:29)
我建议不要使用JavaScript进行这种简单的交互。 CSS能够做到这一点(即使在Internet Explorer 6中),它比使用JavaScript做得更响应。
您可以使用“:hover”CSS伪类,但为了使其适用于Internet Explorer 6,您必须在“a”元素上使用它。
.menuItem
{
display: inline;
background-color: #000;
/* width and height should not work on inline elements */
/* if this works, your browser is doing the rendering */
/* in quirks mode which will not be compatible with */
/* other browsers - but this will not work on touch mobile devices like android */
}
.menuItem a:hover
{
background-color:#F00;
}
答案 2 :(得分:9)
这可以使用:hover伪类在CSS中实现。 (:hover对IE6中的<div>
不起作用)
HTML:
<div id="menu">
<a class="menuItem" href=#>Bla</a>
<a class="menuItem" href=#>Bla</a>
<a class="menuItem" href=#>Bla</a>
</div>
CSS:
.menuItem{
height:30px;
width:100px;
background-color:#000;
}
.menuItem:hover {
background-color:#F00;
}
答案 3 :(得分:5)
<强>的test.html 强>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>jQuery Test</title>
<link rel="stylesheet" type="text/css" href="test.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<div id="menu">
<div class="menuItem"><a href=#>Bla</a></div>
<div class="menuItem"><a href=#>Bla</a></div>
<div class="menuItem"><a href=#>Bla</a></div>
</div>
</body>
</html>
<强> test.css 强>
.menuItem
{
display: inline;
height: 30px;
width: 100px;
background-color: #000;
}
<强> test.js 强>
$( function(){
$('.menuItem').hover( function(){
$(this).css('background-color', '#F00');
},
function(){
$(this).css('background-color', '#000');
});
});
作品: - )
答案 4 :(得分:5)
由于这是一个菜单,不妨将它提升到一个新的水平,并清理HTML,并使用list元素使其更具语义性:
HTML:
<ul id="menu">
<li><a href="#">Bla</a></li>
<li><a href="#">Bla</a></li>
<li><a href="#">Bla</a></li>
</ul>
CSS:
#menu {
margin: 0;
}
#menu li {
float: left;
list-style: none;
margin: 0;
}
#menu li a {
display: block;
line-height:30px;
width:100px;
background-color:#000;
}
#menu li a:hover {
background-color:#F00;
}
答案 5 :(得分:2)
另一方面,这更有效:
$(".menuItem").hover(function(){
this.style.backgroundColor = "#F00";
}, function() {
this.style.backgroundColor = "#000";
});
答案 6 :(得分:1)
我更喜欢foxy的答案,因为在为作业创建现有的css属性时,我们永远不应该使用javascript。
不要忘记在display: block ;
中添加.menuItem
,因此会考虑身高和宽度。
编辑:为了更好的脚本/外观和感觉脱钩,如果您需要通过jQuery更改样式我会定义一个额外的css类并使用$(...).addClass("myclass")
和$(...).removeClass("myclass")
答案 7 :(得分:1)
如果某人读取原始问题意味着他们想要动态更改悬停css而不只是更改元素的基本css规则,我发现这可以工作:
我有一个动态加载的页面,需要我找出加载数据后容器的高度。加载后,我想更改css的悬停效果,以便元素覆盖生成的容器。我需要更改css .daymark:悬停规则以获得新的高度。这就是......
function changeAttr(attrName,changeThis,toThis){
var mysheet=document.styleSheets[1], targetrule;
var myrules=mysheet.cssRules? mysheet.cssRules: mysheet.rules;
for (i=0; i<myrules.length; i++){
if(myrules[i].selectorText.toLowerCase()==".daymark:hover"){ //find "a:hover" rule
targetrule=myrules[i];
break;
}
}
switch(changeThis)
{
case "height":
targetrule.style.height=toThis+"px";
break;
case "width":
targetrule.style.width=toThis+"px";
break;
}
}
答案 8 :(得分:0)
我刚刚在jQuery中编写了一个关于如何通过单选按钮创建div叠加的示例,以便为jQuery创建一个紧凑,交互但简单的颜色选择器插件
http://blarnee.com/wp/jquery-colour-selector-plug-in-with-support-for-graceful-degradation/
答案 9 :(得分:0)
通过创建一个类 .color {background:#F00; }
然后使用addClass()&amp; removeClass()完成它