Div不会显示在悬停上

Question

想要在图像悬停时显示图像的div，我已经写了什么，我会认为这是从stackoverflow的许多来源是正确的，但是当我悬停什么都没有显示。

.hover-state{ 
position: absolute; 
padding: 80px 50px; 
background-color: #ffffff; 
width: 250px; 
height: 220px; 
top: 19px; 
left: 19px; 
cursor: pointer; 
display: none; 
} 

.portfolio a img{ 
max-width: 100%; 
max-height: 100%; 
border-radius: 3px; 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px; 
transition: all 0.1; 
-moz-transition: all 0.1s; 
-webkit-transition: all 0.1s; 
display: block; 
margin: 15px 0px; 
border: 1px solid #dcdbdb; 
background-color: #ffffff; 
padding: 3px; 
-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.16); 
} 

.portfolio-item a img:hover .hover-state{ 
display: block; 
} 


<div class="row portfolio"> 
    <div class="col-sm-6 col-md-3 portfolio-item"> 
     <div class="hover-state"> 
      <p>title</p> 
      <em>Click me</em> 
     </div> 
     <a href="#"><img src="http://www.catgossip.com/wp-content/uploads/2012/04/google-glasses-cat-2.jpg" /></a> 
    </div> 
</div> 

的jsfiddle - https://jsfiddle.net/4LLmj8w1/1/

Answer 1

更新的小提琴 - https://jsfiddle.net/afelixj/4LLmj8w1/3/

改变img:hover到.portfolio-item:hover .hover-state

Answer 2

你似乎并不了解CSS是如何工作的。

重新排序链接，你的DIV，重视:hover到锚，而不是图像，并添加兄弟选择+：

.portfolio-item a:hover + .hover-state{ display:: block; } 

要避免闪烁，加悬停风格.hover状态为好：

.portfolio-item a:hover + .hover-state, .hover-state:hover { display: block; } 

https://jsfiddle.net/4LLmj8w1/5/

Answer 3

代替

.portfolio-item a img:hover .hover-state{ 
    display: block; 
} 

到

.portfolio-item:hover .hover-state{ 
    display: block; 
} 

.hover-state{ 
 
\t position: absolute; 
 
\t padding: 80px 50px; 
 
\t background-color: #ffffff; 
 
\t width: 250px; 
 
\t height: 220px; 
 
\t top: 19px; 
 
\t left: 19px; 
 
\t cursor: pointer; 
 
\t display: none; 
 
} 
 

 
.portfolio a img{ 
 
\t max-width: 100%; 
 
\t max-height: 100%; 
 
\t border-radius: 3px; 
 
\t -moz-border-radius: 3px; 
 
\t -webkit-border-radius: 3px; 
 
\t transition: all 0.1; 
 
\t -moz-transition: all 0.1s; 
 
\t -webkit-transition: all 0.1s; 
 
\t display: block; 
 
\t margin: 15px 0px; 
 
\t border: 1px solid #dcdbdb; 
 
\t background-color: #ffffff; 
 
    \t padding: 3px; 
 
    \t -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.16); 
 
} 
 

 
.portfolio-item:hover .hover-state{ 
 
\t display: block; 
 
} 
 

 
.portfolio-item{ 
 
\t position: relative; 
 
}

<div class="row portfolio"> 
 
    <div class="col-sm-6 col-md-3 portfolio-item"> 
 
     <div class="hover-state"> 
 
      <p>title</p> 
 
      <em>Click me</em> 
 
     </div> 
 
     <a href="#"><img src="http://www.catgossip.com/wp-content/uploads/2012/04/google-glasses-cat-2.jpg" ></a> 
 
    </div> 
 
</div>