CSS/JQuery：使 div 出现在另一个旁边（具有绝对位置）答案

【问题标题】：CSS/JQuery: Make div appear next to another (with absolute position)CSS/JQuery：使 div 出现在另一个旁边（具有绝对位置）
【发布时间】：2016-10-09 22:23:49
【问题描述】：

我有一个#hidden div，当#HoverMe 悬停时出现，将其取消悬停并再次隐藏。 #hidden 有其子 div，其作用类似于下拉列表。 #hidden使用position: absolute;。如何强制#hidden div 出现在#HowerMe 旁边，并让它的子div（在#hidden div 内）出现在下面？

现在的工作方式：

                          ------------     
                         |  #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();
        });

【问题讨论】：

你必须使用position:absolute 吗？有很多方法可以在不使用绝对定位的情况下实现您想要的。
@JonP 如果我不使用absolute，那么它会干扰其他 div 的位置。到目前为止，我只能通过absolute 设法避免这种情况，不知道其他方式。
还有哪些 div？您希望“汽车列表”显示在其他内容之上吗？
this fiddle 是您想要的吗？（设置left 和top 属性以相对于包含<div> 定位它）
我确实在您的previous questions 之一中解释了这一点：)

标签： jquery css asp.net-mvc

【解决方案1】：

您应该使用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 对象使用带有第一个 $ 的 var 名称：var $hoverElement = $("#HoverMe"); 和 var $popup = $("#hidden");。
位置现在是正确的，但我不能让它像我的 JQuery 代码一样工作。当页面像您一样运行时，我想隐藏#hidden div，但是当我将鼠标悬停在#HowerMe 并尝试将鼠标移动到#hidden div 时，它仍然会消失。我试图实现我的代码但没有成功。 编辑： 我的意思是，我想阻止#hidden 在我悬停它时消失。如果我离开，它就会消失。
你应该简单地将悬停函数绑定到#HowerMe元素而不是warpper元素。在演示中将hoverEle.hover 更改为$('.wrapper').hover 并且#hidden div 不会消失。
您可以将position: absolute 添加到wrapper 元素，它不会干扰其他div 的位置。