Div不会显示在悬停上
问题描述:
想要在图像悬停时显示图像的div,我已经写了什么,我会认为这是从*的许多来源是正确的,但是当我悬停什么都没有显示。Div不会显示在悬停上
.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/
答
你似乎并不了解CSS是如何工作的。
重新排序链接,你的DIV,重视:hover
到锚,而不是图像,并添加兄弟选择+
:
.portfolio-item a:hover + .hover-state{ display:: block; }
要避免闪烁,加悬停风格.hover状态为好:
.portfolio-item a:hover + .hover-state, .hover-state:hover { display: block; }
答
代替
.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>
'.portfolio项目一个IMG:HO ver .hover-state'意味着在悬停的图像标签内的悬浮状态。但你指定的图像标签没有任何内容。悬停状态div是它的姐妹节点,而不是子节点。 –