Pim*_*ger 25 html javascript css jquery
我不想使用以下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是否已加载.
fox*_*oxy 52
你的代码看起来很好.
在使用jQuery的$(回调)函数执行javascript之前,请确保DOM已准备就绪:
$(function() {
$('.menuItem').hover( function(){
$(this).css('background-color', '#F00');
},
function(){
$(this).css('background-color', '#000');
});
});
Vin*_*ert 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;
}
这可以使用:hover伪类在CSS中实现.(:hover对<div>IE6中的s 不起作用)
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;
}
的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');
});
});
作品:-)
由于这是一个菜单,不妨将它提升到一个新的水平,并清理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;
}