jquery - 如何让文本展开div到顶部

Question

我有三个 div，每个里面都有一个“显示信息”项。当用户将鼠标悬停在“显示信息”项上时，他可以看到一些带有附加信息的文本出现在“显示信息”项上方。但不同 div 中的附加信息可以有不同的文本长度。有些信息可能很短，有些则很长……好吧，这会产生一个问题，即文本会扩大将信息包裹到底部的 div 的大小，因此它会覆盖“信息”项。将第二个 div“显示信息”(主题 2)悬停时，您可以清楚地理解我的示例中的问题。主要目标是使文本将其包装器的大小扩展到顶部，而不是覆盖“显示信息”项。

JSFIDDLE EXAMPLE LINK

$(function(){
	$('.hoverinfo').mouseover(function(){
		$(this).prepend('<div class="info"></div>');
		$('.info').html($(this).attr("data-info"));
		$('.info').fadeIn();
	}).mouseleave(function(){
		$('.info').remove();
	});
});

.subject{
  width:400px;
  height:100px;
  background:lightblue;
}
.subject:nth-of-type(2){
  background:lightgrey;
}
.subject:nth-of-type(3){
  background:lightgreen;
}
.info {
  position:absolute;
  color:black;
  width: 200px;
  background-color:lightcyan;
  border: solid 2px black;
  text-align: center;
  margin-top: -30px;
  display: none;
}
.hoverinfo {
  background:pink;
  float:right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br>
<div class="subject">
	<div class="hoverinfo" data-info="The text from subject 1 - OK!">show info(hover it)</div>
	<span>subject 1</span>
</div>
<div class="subject">
	<div class="hoverinfo" data-info="There is more text inside and this is a problem because text expand div to the bottom - PROBLEM!">show info(HOVER IT)</div>
	<span>subject 2 - here is a problem</span>
</div>
<div class="subject">
	<div class="hoverinfo" data-info="The text from subject 3 - OK">show info (hover it)</div>
	<span>subject 3</span>
</div>

Answer 1

您不需要 JQuery 来执行此操作...只需一个 CSS 转换。

JSFiddle Demo

.hoverinfo {
    background:pink;
    float:right;
    position: relative; /* positioning context */
}

.info {
    position:absolute;
    color:black;
    width: 200px;
    background-color:lightcyan;
    border: solid 2px black;
    text-align: center;
    top:0;   /* position at top */
    transform:translateY(-100%); /* shift up by own height */
    margin-top: -10px; /* spacing for a little extra spice */
    display: none;
}

$(function(){
	$('.hoverinfo').mouseover(function(){
		$(this).prepend('<div class="info"></div>');
		$('.info').html($(this).attr("data-info"));
		$('.info').fadeIn();
	}).mouseleave(function(){
		$('.info').remove();
	});
});

.subject{
	width:400px;
	height:100px;
	background:lightblue;
}
.subject:nth-of-type(2){
  background:lightgrey;
}
.subject:nth-of-type(3){
  background:lightgreen;
}
.info {
	position:absolute;
	color:black;
	width: 200px;
	background-color:lightcyan;
	border: solid 2px black;
	text-align: center;
	top:0;
    transform:translateY(-100%);
    margin-top: -10px;
	display: none;
}
.hoverinfo {
	background:pink;
	float:right;
    position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br>
<div class="subject">
	<div class="hoverinfo" data-info="The text from subject 1 - OK!">show info(hover it)</div>
	<span>subject 1</span>
</div>
<div class="subject">
	<div class="hoverinfo" data-info="There is more text inside and this is a problem because text expand div to the bottom - PROBLEM!">show info(HOVER IT)</div>
	<span>subject 2 - here is a problem</span>
</div>
<div class="subject">
	<div class="hoverinfo" data-info="The text from subject 3 - OK">show info (hover it)</div>
	<span>subject 3</span>
</div>