当用户将鼠标放在另一个元素上时，我试图显示一个弹出元素：
<!DOCTYPE HTML>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#base').hover(
function handleIn(e) {
var popup = $('<img/>', {
id: 'popup',
src: 'http://placehold.it/32x32'
});
popup.css({
'position': 'absolute',
'z-index': 300,
'left': e.pageX - 30,
'top': e.pageY - 30
});
popup.mouseover(function() {
console.log('mouseover');
});
popup.mouseout(function() {
console.log('mouseout');
});
$('#base').append(popup);
},
function handleOut() {
}
);
});
</script>
</head>
<body>
<img id="base" src="http://placehold.it/256x256">
</body>
</html>
为什么没有显示弹出窗口元素？它已添加到DOM，但我看不到。
我究竟做错了什么？我该如何解决？
您不能将子<img/>元素附加到元素上。看这里
尝试将其附加到父项
$(function() {
$('#base').hover(
function handleIn(e) {
console.log("asd");
var popup = $('<img/>', {
id: 'popup',
src: 'http://placehold.it/32x32'
});
popup.css({
'position': 'absolute',
'z-index': 300,
'left': e.pageX - 30,
'top': e.pageY - 30
});
popup.mouseover(function() {
console.log('mouseover');
});
popup.mouseout(function() {
console.log('mouseout');
});
$('#base').parent().append(popup);
},
function handleOut() {
}
);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="base" src="http://placehold.it/256x256">顺便说一下，这样，您将在每个悬停事件上都有一个新元素。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句