Question

我有三个div和每个内部的“show info”项目。当用户将鼠标悬停在“显示信息”项目上时，他可以看到一些文本，其中包含显示在“显示信息”项目上方的其他信息。但是不同div中的附加信息可以具有不同的文本长度。一些信息可能很短而且有些长......这就产生了一个问题，即文本扩展了将信息包装到底部的div的大小，因此它覆盖了“info”项。当我将鼠标悬停在第二个div“show info”（主题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>

Answer 2

您可以尝试调整.info消息开始淡入时的位置（或者，您可以显示它，调整位置，隐藏它，然后使用fadeIn，可能会太快看不到）：

if($('.info').offset().top + $('.info').height() > $(this).offset().top){
  $('.info').css('top', $(this).offset().top - $('.info').height());
}

这将检查页面上.info元素的底部（顶部+高度）是否低于.hoverinfo元素的顶部，如果是，则会设置顶部.info元素顶部的.hoverinfo元素减去.info元素的高度。这是一个小提琴：https://jsfiddle.net/L3y6xwvb/。

如何使文本扩展div到顶部

2 个答案: