css - 当悬停具有绝对位置的 div 时悬停关闭

Question

Css 初学者问!!当我尝试悬停具有绝对位置的文本时，悬停消失了。无法解决。也许 z index 解决了问题，但我无法做到。提前感谢您的帮助。 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>

Answer 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