我试图在将td鼠标悬停时添加一个弹出窗口。每行都有多个td,并且弹出窗口应仅对第一个起作用。只要mouseout在同一列中,此方法就起作用。也就是说,如果我上下移动鼠标,弹出窗口将按预期方式显示和消失。但是,如果我将鼠标水平移动到下一个td中,则弹出窗口不会消失。我为此创建了一个jsfiddle,但弹出窗口不起作用。控制台说没有定义javascript函数,但在这里可以正常工作,因此jsfiddle设置中我必须出了点问题。这是我正在使用的代码。正在使用Td,因为这是我给的代码。不管鼠标如何移动,有人能看到隐藏弹出式窗口需要什么吗?
已编辑以解决问题。
<style>
#pop-description{
display : none;
position : absolute;
z-index : 99999;
left : 0px;
padding : 10px;
background : #3AB9AE;
border : 1px solid #9a9a9a;
margin : 0px;
}
</style>
<script>
$(document).ready(function(){
function ShowDescription(id) {
var position = $('.class-desc-'+id).position();
var desc = $('#desc-'+id).val();
$('#pop-description').css('top', position.top);
$('#pop-description').text(desc);
//$('#pop-description').toggle();
$('.class-desc-'+id).mouseenter(function() {
$('#pop-description').css('display', 'block');
}).mouseleave(function() {
$('#pop-description').css('display', 'none');
});
}
});
</script>
<div style="display:relative;"><div id="pop-description" style="display:none;"></div></div>
<table>
<tr>
<td class="class-desc-0" onmouseOver="ShowDescription('0');">title</td>
<td>Address</td>
<td>State</td>
<input type="hidden" name="desc-0" value="first test" id="desc-0">
</tr>
<tr>
<td class="class-desc-1" onmouseOver="ShowDescription('1');">title</td>
<td>Address</td>
<td>State</td>
<input type="hidden" name="desc-1" value="second test" id="desc-1">
</tr>
<tr>
<td class="class-desc-2" onmouseOver="ShowDescription('2');">title</td>
<td>Address</td>
<td>State</td>
<input type="hidden" name="desc-2" value="third test" id="desc-2">
</tr>
</table>
答案 0 :(得分:1)
我认为您想得太多了。这就是我要做的。我将使用jQuery,如下所示。
mouseenter
上触发所需的操作mouseleave
发起相反的操作
$(function() {
$(".toggle").mouseenter(function() {
// Your code goes below: initiate first action
$(this).addClass("showOff");
}).mouseleave(function() {
// Your code goes below: Initiate opposite action
$(".toggle").removeClass("showOff");
});
});
div {
cursor: pointer;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
transition: all 2s;
}
.showOff {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background: orange;
transition: all 2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle">Hove over me</div>
注意:在您的情况下,您在mouseenter
上显示弹出窗口,并在mouseleave
上将其隐藏
答案 1 :(得分:0)
为什么不仅仅使用悬停?喜欢
class-desc:hover .popup{
display: block;
}