我是 jQuery 的新手，我在网上查找过堆栈溢出搜索，但无法正常工作。我正在尝试更改鼠标悬停时 div 的类。
我的 div 的 html 是:
<!DOCTYPE html>
<html>
<head>
<title>Javascript-jQuery Sandbox Practice</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/default.css" />
<script src="js/default.js"></script>
</head>
<body>
<div id="container">
<div id="grid1">
<div class="grid">Grid 01</div>
<div class="grid">Grid 02</div>
<div class="grid">Grid 03</div>
<div class="grid">Grid 04</div>
</div>
<div id="grid2">
<div class="grid">Grid 05</div>
<div class="grid">Grid 06</div>
<div class="grid">Grid 07</div>
<div class="grid">Grid 08</div>
</div>
<div id="grid3">
<div class="grid">Grid 09</div>
<div class="grid">Grid 10</div>
<div class="grid">Grid 11</div>
<div class="grid">Grid 12</div>
</div>
<div id="grid4">
<div class="grid">Grid 13</div>
<div class="grid">Grid 14</div>
<div class="grid">Grid 15</div>
<div class="grid">Grid 16s</div>
</div>
</div>
</body>
</html>
我的 div CSS 是:
.grid {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid black;
padding: 5px;
background-color: white;
}
悬停 CSS。
.grid_hover {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid black;
padding: 5px;
background-color: #3ca1ff;
}
我的 div js 是:
$(document).ready(function() {
$('.grid').hover(function() {
$(this).toggleClass('.grid_hover');
});
});
提前致谢。
编辑:另外，这里是网站: http://tiny.am/sandbox/Javascript-jQuery/
编辑:看来我所要做的就是重新排序 .css。之前是:(没有工作)
#container {
text-align:center;
}
.grid_hover {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid black;
padding: 5px;
background-color: #3ca1ff;
}
#grid1 {
float: inherit;
padding-bottom: 5px;
}
#grid2 {
float: inherit;
padding-bottom: 5px;
}
#grid3 {
float: inherit;
padding-bottom: 5px;
}
#grid4 {
float: inherit;
padding-bottom: 5px;
}
.grid {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid black;
padding: 5px;
background-color: white;
}
在其之后:(工作)
#container {
text-align:center;
}
.grid {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid black;
padding: 5px;
background-color: white;
}
.grid_hover {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid black;
padding: 5px;
background-color: #3ca1ff;
}
#grid1 {
float: inherit;
padding-bottom: 5px;
}
#grid2 {
float: inherit;
padding-bottom: 5px;
}
#grid3 {
float: inherit;
padding-bottom: 5px;
}
#grid4 {
float: inherit;
padding-bottom: 5px;
}
最佳答案
使用toggleClass，您不需要在类名中添加句点。如果你删除它有效的时期:
$(this).toggleClass('grid_hover');
不
$(this).toggleClass('.grid_hover');
作为旁注，您可以使用 :hover 状态使用 css 完全按照您的意愿进行操作。
关于jquery - 使用 jQuery 更改 div 的类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33950530/