CODEWITHSUNDEEP
csshoverpositioncss-position
user4991434
user4991434

Reputation:

When hover a div with position absolute makes hover off

Css beginner asks!!When i try to hover the text which have position absolute, hover is gone.Could not solve it.Maybe z index solve the problem but i could not make it.Thanks for your helps in advance. 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>

Upvotes: 0

Views: 2911

Answers (1)

Aakash
Aakash

Reputation: 1791

Replace

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

with 

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

Try this.

<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;
}


--Edit--
JSFiddle

Upvotes: 1

Related Questions