当悬停具有绝对位置的 div 会使悬停关闭答案

【问题标题】：When hover a div with position absolute makes hover off当悬停具有绝对位置的 div 会使悬停关闭
【发布时间】：2015-09-05 03:27:13
【问题描述】：

Css 初学者问！！当我尝试悬停具有绝对位置的文本时，悬停消失了。无法解决。也许 z 索引解决了问题，但我无法做到。提前感谢您的帮助。 Fiddle

*{
  padding:0;
  margin:0;
}
body {
  background:#eee;
  font-family:helvetica;
  font-weight:bold;
}
.news {
  position:relative;
  left:50%;
  margin-left:-300px;
  margin-top:50px;
  width:600px;
  height:300px;
  border-top:3px solid #f26222;
  overflow:hidden;
  z-index:1;
}
.news img {
  cursor:pointer; 
}
.text {
  position:absolute;
  top:85%;
  transition:all 0.3s ease;
 
}
.text h2 {
  margin-bottom:20px;
  text-align:center;
}
.text p {
  margin-left:10px;
  margin-right:10px;
  font-weight:normal;
}
.news img:hover + .text {
  top:65%;
}
span {
  position:absolute;
  top:0;
  background:#f26222;
  color:#eee;
  padding:3px;
}

<div class="news">
  <span>Technology</span>
<img src="http://i.imgur.com/YlkCC9u.jpg" height=300 , width=600>
  <div class="text">
    <h2>LOREM IPSUM ETIAM EST</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</p>
  </div>
</div>

【问题讨论】：

您是说当您将鼠标悬停在文本上时，您希望某事发生？
当您将鼠标悬停在其上时，您正在更改文本的位置，那么当您将鼠标悬停在其上时，您为什么会惊讶它会“消失”呢？
当显示悬停图像文本时，悬停文本文本不显示。

标签： css hover position css-position

【解决方案1】：

替换

.news img:hover + .text {
  top:65%;
}

与

.news:hover .text {
  top:65%;
}

试试这个。

<div class="news">
  <span>Technology</span>
<img src="http://i.imgur.com/YlkCC9u.jpg" height=300 , width=600>
  <div class="text">
    <h2>LOREM IPSUM ETIAM EST</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</p>
  </div>
</div>

*{
  padding:0;
  margin:0;
}
body {
  background:#eee;
  font-family:helvetica;
  font-weight:bold;
}
.news {
  position:relative;
  left:50%;
  margin-left:-300px;
  margin-top:50px;
  width:600px;
  height:300px;
  border-top:3px solid #f26222;
  overflow:hidden;
}
.news img {
  cursor:pointer; 
}
.text {
  position:absolute;
  top:85%;
  transition:all 0.3s ease;

}
.text h2 {
  margin-bottom:20px;
  text-align:center;
}
.text p {
  margin-left:10px;
  margin-right:10px;
  font-weight:normal;
}
.news:hover .text {
  top:65%;
}
span {
  position:absolute;
  top:0;
  background:#f26222;
  color:#eee;
  padding:3px;
}

--编辑--
JSFiddle

【讨论】：

谢谢。我知道解决办法很简单。