0
私はホバー効果を持つグリッドを作成しようとしています。 grid-divの上にマウスを置くと背景色が設定され、背景色をもう一度上書きすると背景色が削除されます。
色を設定してホバリングで取り除くと、もう一度背景色を適用することはできません。イベントハンドラをif文の中に1/0変数擬似スイッチで設定しようとしました。状態に応じてイベントハンドラを起動する方法は？
私は間違っていますか？
EDIT：実際のイベントハンドラをトグルにする方法。
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;
})
}
})
}/* // 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'. */<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>
ライブデモを見ることができますか？ – madalinivascu
私は、文が一度だけ実行され、別のイベントの中にイベントを入れ子にすることは、可能な解決策として「アクティブ」（ループ）を維持すると考えました。多くのことを試しました。 – Hyrule
下記の私の答えを参照してください – madalinivascu