Question

我有一个#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();
        });

Answer 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>

CSS / JQuery：使div显示在另一个旁边（具有绝对位置）

1 个答案: