JQuery -鼠标
JQuery -鼠标
提问于 2018-12-04 00:49:36
下面我有一个非常简单的代码。当我悬停一个小的红色方块，另一个大的颜色方块出现。
问题:当我把光标移开这个大正方形时，这个方块将被mouseleave().hide()隐藏，但是它不能工作。
请帮帮忙。
HTML
<table class="table" style="width:100%">
<tr>
<td>
<div class="hot-spot" data-target="black"></div>
<div ID="black"></div>
</td>
<td>
<div class="hot-spot" data-target="green"></div>
<div ID="green"></div>
</td>
<td>
<div class="hot-spot" data-target="blue"></div>
<div ID="blue"></div>
</td>
<td>
<div class="hot-spot" data-target="yellow"></div>
<div ID="yellow"></div>
</td>
</tr>
</table>JS
$(function() {
$('.hot-spot').hover(function (e) {
var square = $(this).data('target');
$('#' + square).show();
$('#' + square).mouseleave.hide();
});
});回答 2
Stack Overflow用户
回答已采纳
发布于 2018-12-04 00:58:59
只需在mouseleave之后添加括号，就可以显示它是一个函数：
$(function() {
$('.hot-spot').hover(function(e) {
var square = $(this).data('target');
$('#' + square).show();
$('#' + square).mouseleave(function() {
$('#' + square).hide();
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" style="width:100%">
<tr>
<td>
<div class="hot-spot" data-target="black">a</div>
<div ID="black">black</div>
</td>
<td>
<div class="hot-spot" data-target="green">b</div>
<div ID="green">green</div>
</td>
<td>
<div class="hot-spot" data-target="blue">c</div>
<div ID="blue">blue</div>
</td>
<td>
<div class="hot-spot" data-target="yellow">d</div>
<div ID="yellow">yellow</div>
</td>
</tr>
</table>
Stack Overflow用户
发布于 2018-12-04 00:58:34
mouseleave接受一个函数作为一个论据
$(function() {
$('.hot-spot').hover(function (e) {
var square = $(this).data('target');
$('#' + square).show();
$('#' + square).mouseleave(function() { $('#' + square).hide() });
});
})();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53604116
复制相关文章
相似问题
腾讯云开发者
