我想制作类似于Twitter的作者窗格的内容:将dropdown
区域悬停在其上时,将包含用户信息的框附加到atuhor-pane
,并在鼠标移出时该框消失。
$(".dropdown").hover(function() {
let athrDiv = $(this).children(".author-pane");
let box = `<div class="box">I'm John'Doe's info box </div>`;
athrDiv.empty();
athrDiv.append(box);
});
$(document).on('mouseout', '.dropdown', function() {
$(this).children(".box").empty();
});
body {
background: #fff;
padding: 20px;
font-family: Helvetica;
}
.box {
background-color: yellow;
border: 1px solid red;
width: 200px;
height: 200px;
z-index: 1000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<strong class="author">John Doe</strong>
<div class="author-pane">
</div>
</div>
<div>Lorem ibsum</div>
问题是两方面的
鼠标移出后该框不会消失。
该框不会显示在页面上方(不会替换下一个div)
我该如何解决?
最佳答案
您也只能使用css
进行此操作。悬停时只需display
none
&block
。
.author:hover + .author-pane{display:block;}
$(".dropdown").hover(function() {
let athrDiv = $(this).children(".author-pane");
let box = `<div class="box">I'm John'Doe's info box </div>`;
athrDiv.empty();
athrDiv.append(box);
});
body {
background: #fff;
padding: 20px;
font-family: Helvetica;
}
.dropdown {
position: relative;
display: inline-block;
}
.box {
background-color: yellow;
border: 1px solid red;
width: 200px;
height: 200px;
z-index: 1000;
}
.author-pane {
display: none;
position: absolute;
z-index: 1;
right: -203px;
top: 0px;
}
.dropdown:hover .author-pane {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<strong class="author">John Doe</strong>
<div class="author-pane">
</div>
</div>
<div>Lorem ibsum</div>