html - 悬停时不会显示 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

更新了 fiddle - https://jsfiddle.net/afelixj/4LLmj8w1/3/

将 img:hover 更改为 .portfolio-item:hover .hover-state