我有一个 #hidden div，当 #HoverMe 悬停时出现，取消悬停它并再次隐藏。 #hidden 有它的子 div，就像一个下拉列表。
#hidden 使用 position: absolute;。如何强制 #hidden div 出现在 #HowerMe 旁边，并让它的子分区(在 #hidden 分区内)出现在下面？
现在的运作方式:
------------
| #HoverMe |
------------
---------
| #hidden |
| --------|
| car.name|
|---------|
| car.name|
---------
我想要什么
------------ ---------
| #HoverMe | | #hidden |
------------ | --------|
| car.name|
|---------|
| car.name|
---------
我的代码:
我使用我的 #HoverMe-div 来显示 #hidden-div，其中包含我要显示的内容列表。
<div style="position: relative">
<div id="HoverMe" >
This owner own @Html.DisplayFor(model => model.TotCar) cars in total
</div>
<div id="hidden" style="position: absolute; display: none; background-color: black"> //<------- hidden
@foreach (var car in Model.Car) {
<div>@car.Name</div>
}
</div>
</div>
<script>
var hoverEle = $("#HoverMe");
var popupEle = $("#hidden");
function hidePopup() {
$("#hidden").hide();
}
$('#HoverMe, #hidden').hover(function () {
$("#hidden").stop(true).show();
}, function () {
$("#hidden").stop(true).delay(2000).fadeOut();
});
最佳答案
您应该使用 display: inline-block; 来使隐藏的 div 显示为您想要的。您甚至不需要将 position 设置为 absolute。
一些建议
使用
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul>
为了显示列表。
当您将一个元素保存到变量中时，您可以使用该变量而不是再次调用
$()。var hoverEle = $("#HoverMe"); var popupEle = $("#hidden"); function hidePopup() { popupEle.hide(); // indeatd of $("#hidden").hide(); } hoverEle.hover(function () { popupEle.stop(true).show(); }, function () { popupEle.stop(true).delay(2000).fadeOut(); });
这是工作演示:
var hoverEle = $("#HoverMe");
var popupEle = $("#hidden");
popupEle.hide();
hoverEle.hover(function() {
popupEle.fadeIn();
}, function() {
popupEle.fadeOut();
});.wrapper {
width: 100%;
text-align: left;
}
#HoverMe {
display: inline-block;
vertical-align: top;
width: 200px;
height: 60px;
background-color: green;
}
#hidden {
width: 200px;
display: inline-block;
margin: 0;
vertical-align: top;
background-color: black;
color: white;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id="HoverMe" >
This owner own
</div>
<ul id="hidden">
<li>Car1</li>
<li>Car2</li>
<li>Car3</li>
<li>Car4</li>
<li>Car5</li>
</ul>
</div>在一页中
<!DOCTYPE html>
<html>
<head>
<title>Test app</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
.wrapper {
width: 100%;
text-align: left;
}
#HoverMe {
display: inline-block; // in order to make div behave as inline element
vertical-align: top;
width: 200px;
height: 60px;
background-color: green;
}
#hidden {
width: 200px;
display: inline-block; // in order to make div behave as inline element
margin: 0;
vertical-align: top;
background-color: black;
color: white;
}
</style>
<div class="wrapper">
<div id="HoverMe" >
This owner own
</div>
<ul id="hidden">
<li>Car1</li>
<li>Car2</li>
<li>Car3</li>
<li>Car4</li>
<li>Car5</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
console.log("ready");
var hoverEle = $("#HoverMe");
var popupEle = $("#hidden");
popupEle.hide();
hoverEle.hover(function() {
popupEle.fadeIn();
}, function() {
popupEle.fadeOut();
});
});
</script>
</body>
</html>关于jquery - CSS/JQuery : Make div appear next to another (with absolute position)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39949152/