[英]div css not changing on hover
将div悬停在上面时,我要更改它们的网格。 我正在尝试使它的背景颜色变为白色,而当鼠标不再悬停在它们上面时,背景颜色变为灰色。 我已经搜索了一段时间,但似乎找不到解决我所寻找问题的答案。
var d = ("<div class='square'></div>");
var value = [];
function createGrid(numSquares) {
var area = $('#g_area');
var squareSize = Math.floor(area.innerWidth() /numSquares);
var n =0;
for (var i = 0, len = (numSquares*numSquares); i < len; i++) {
area.append(d);
for (var j = 0; j < numSquares; j++) {
$(d).attr('id', n);
n++;
value[n] = 0;
}
}
$('.square').height(squareSize);
$('.square').width(squareSize);
};
function resetGrid() {
$(".square").remove();
}
$(document).ready(function () {
createGrid(32);
});
$('.square').hover(function() {
$(this).css({backgroundColor: '#FFFFFF'}) ;
$(this).css({backgroundColor: '#C8C8C8'}) ;
});
jsfiddle: https ://jsfiddle.net/psyonix/1g9p59bx/16/
您的悬停语法不正确,您需要传递两个函数:
$('.square').hover(function () {
$(this).css({
backgroundColor: '#FFFFFF'
});}, function(){
$(this).css({
backgroundColor: '#C8C8C8'
});
});
您需要定义handlerOut。 这应该工作。 https://jsfiddle.net/1g9p59bx/18/
$('.square').hover(function () {
$(this).css({
backgroundColor: '#FFFFFF'
});
}, function() {
$(this).css({
backgroundColor: '#C8C8C8'
});
});
为什么不把它放在您的CSS上呢?
.square:hover
{
background-color: #FFFFFF;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.