0
我創建了一個像素網格，並希望它在盤旋時變爲黑色。 問題是該事件不起作用。jquery懸停功能不改變類
$(document).ready(function() {
function makeGrid(k) {
var size = 320/k;
for (var i = 0; i < k; i++) {
$(".container").append("<div class=row></div>");
}
for (var j = 0; j < k; j++) {
$(".row").append("<div class=square></div>");
}
$('.square').css({
'height': size,
'width': size
});
}
$('.square').hover(function() {
$(this).addClass(".hover");
})
$('.reset').on('click', function() {
$(".container").empty();
makeGrid(16);
})
$('.start').on('click', function() {
var n = prompt("Set the size");
$(".container").empty();
makeGrid(n);
})
}).square {
border-collapse: collapse;
display: inline-block;
}
.container {
text-align: -webkit-center;
position: relative;
top: 50px;
margin: 0 auto;
border: 1px solid #000000;
width: 320px;
height: 320px;
border-collapse: collapse;
}
.row {
clear: both;
content: "";
height: 20px;
}
.hover {
background-color: black;
}
button {
text-align: center;
background-color: white;
display: inline-block;
font-size: 20px;
border-radius: 2px;
top: 50%;
}
.wrap {
text-align: -webkit-center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrap">
<button class="clear">New Grid</button>
<button class="start">Start</button>
<button class="reset">Reset</button>
</div>
<div class="container"></div>