我尝试使用悬停效果创建网格。如果将鼠标悬停在grid-div上,则应设置背景颜色,当您将鼠标悬停在它上面时,应删除背景颜色。
我的问题是,一旦我设置了颜色并通过悬停移除它,它不会让我再次应用背景颜色。我试图将if事件处理程序设置在带有1/0变量伪开关的语句中。
我做错了什么?
编辑:如何使实际的事件处理程序切换。
http://codepen.io/cgonen/pen/MJqVpQ
$(function(){
var size = 16
var width = 600 / size
createGrid(size, width)
hover()
})
function createGrid(size, width) {
for (var j = 0; j < size; j++) {
for (var i = 0; i < size; i++) {
$('.grid').append('<div class="vlak"></div>')
}
}
$('.vlak').css("width", width)
$('.vlak').css("height", width)
}
function hover() {
var active = 0;
$('.vlak').on('mouseenter', function () {
$(this).css("background-color", "red")
active = 1;
if (active = 1) {
$(this).on('mouseenter', function () {
$(this).css("background-color", "")
active = 0;
})
}
})
}
&#13;
/* // Snippets section below.
// Border-box snippet */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* // clearfix snippet */
.clearfix:before,
.clearfix:after {
content:"";
display:block;
clear:both;
}
/* // End of snippets section. */
.wrapper {
width: 600px;
margin: 0 auto;
// border: 1px solid black;
}
.grid {
box-sizing: content-box;
line-height: 0;
margin: 0;
padding: 0;
outline: 1px solid black;
}
.vlak {
box-sizing: border-box;
float: left;
width: 50px; height: 50px;
line-height: 0;
margin: 0;
padding: 0;
border: 1px solid black;
}
/* // questions for myself:
// Why setting border changes total size of div? I've set box-sizing to border-box or content-box accordingly,
// but that didn't work forcing me to use 'outline'. */
&#13;
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content = "width=device-width", initiat-scale="1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>HoverMatic</h1>
<p>General description placeholder</p>
<input type="number" value="16" placeholder="grid size">
<select name="colors" id="">
<option value="black">black</option>
<option value="blue">blue</option>
<option value="green">green</option>
<option value="pink">pink</option>
<option value="red">red</option>
<option value="yellow">yellow</option>
</select>
<button>clear grid</button>
</div>
<div class="grid clearfix"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="scripts/main.js"></script>
</body>
&#13;
答案 0 :(得分:0)
您无需附加第二个事件监听器;并且您还需要===
来测试相等性:x = 1
是一项任务。
function hover() {
var active = 0;
$('.vlak').on('mouseenter', function () {
if (active == 1) {
$(this).css("background-color", "")
active = 0;
}
else {
$(this).css("background-color", "red")
active = 1;
}
})
}
答案 1 :(得分:0)
使用班级来切换颜色:
$(function(){
var size = 16
var width = 600 / size
createGrid(size, width)
hover()
})
function createGrid(size, width) {
for (var j = 0; j < size; j++) {
for (var i = 0; i < size; i++) {
$('.grid').append('<div class="vlak"></div>')
}
}
$('.vlak').css("width", width)
$('.vlak').css("height", width)
}
function hover() {
$('.vlak').on('mouseenter', function () {
$(this).toggleClass('red');
})
}
&#13;
/* // Snippets section below.
// Border-box snippet */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* // clearfix snippet */
.clearfix:before,
.clearfix:after {
content:"";
display:block;
clear:both;
}
/* // End of snippets section. */
.wrapper {
width: 600px;
margin: 0 auto;
// border: 1px solid black;
}
.grid {
box-sizing: content-box;
line-height: 0;
margin: 0;
padding: 0;
outline: 1px solid black;
}
.vlak {
box-sizing: border-box;
float: left;
width: 50px; height: 50px;
line-height: 0;
margin: 0;
padding: 0;
border: 1px solid black;
}
.red {
background-color:red;
}
/* // questions for myself:
// Why setting border changes total size of div? I've set box-sizing to border-box or content-box accordingly,
// but that didn't work forcing me to use 'outline'. */
&#13;
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content = "width=device-width", initiat-scale="1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>HoverMatic</h1>
<p>General description placeholder</p>
<input type="number" value="16" placeholder="grid size">
<select name="colors" id="">
<option value="black">black</option>
<option value="blue">blue</option>
<option value="green">green</option>
<option value="pink">pink</option>
<option value="red">red</option>
<option value="yellow">yellow</option>
</select>
<button>clear grid</button>
</div>
<div class="grid clearfix"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="scripts/main.js"></script>
</body>
&#13;
你可能正在寻找类似的东西:
$(function() {
var size = 16
var width = 600 / size
createGrid(size, width)
hover()
})
function createGrid(size, width) {
for (var j = 0; j < size; j++) {
for (var i = 0; i < size; i++) {
$('.grid').append('<div class="vlak"></div>')
}
}
$('.vlak').css("width", width)
$('.vlak').css("height", width)
}
function hover() {
var isActive = false;
$('.vlak').on('click', function() {
isActive = !isActive;
})
$('.vlak').on('mouseenter', function() {
if (isActive) {
$(this).toggleClass('red');
}
})
}
&#13;
/* // Snippets section below.
// Border-box snippet */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* // clearfix snippet */
.clearfix:before,
.clearfix:after {
content: "";
display: block;
clear: both;
}
/* // End of snippets section. */
.wrapper {
width: 600px;
margin: 0 auto;
// border: 1px solid black;
}
.grid {
box-sizing: content-box;
line-height: 0;
margin: 0;
padding: 0;
outline: 1px solid black;
}
.vlak {
box-sizing: border-box;
float: left;
width: 50px;
height: 50px;
line-height: 0;
margin: 0;
padding: 0;
border: 1px solid black;
}
.red {
background-color: red;
}
/* // questions for myself:
// Why setting border changes total size of div? I've set box-sizing to border-box or content-box accordingly,
// but that didn't work forcing me to use 'outline'. */
&#13;
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" , initiat-scale="1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>HoverMatic</h1>
<p>General description placeholder</p>
<input type="number" value="16" placeholder="grid size">
<select name="colors" id="">
<option value="black">black</option>
<option value="blue">blue</option>
<option value="green">green</option>
<option value="pink">pink</option>
<option value="red">red</option>
<option value="yellow">yellow</option>
</select>
<button>clear grid</button>
</div>
<div class="grid clearfix"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="scripts/main.js"></script>
</body>
&#13;
答案 2 :(得分:0)
我已经改变了你的悬停方法,我希望这会解决你的问题。
function hover() {
$('.vlak').on('mouseenter', function () {
if(this.getAttribute("style").indexOf('red') < 0) {
$(this).css("background-color", "red")
} else {
$(this).css("background-color", "white");
}
})
}
请告诉我这是否有帮助?
你可以看到现场演示