当将 div 悬停在绝对位置时，悬停会关闭

Question

Css初学者问！！当我尝试悬停具有绝对位置的文本时，悬停是 gone.Could 无法解决 it.Maybe z index 解决问题但我无法使it.Thanks 提前为您提供帮助。 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

当将 div 悬停在绝对位置时，悬停会关闭

When hover a div with position absolute makes hover off

css

position

css-position

hover