Question

想要在图像悬停时显示图像的顶部，我已经在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-state：

.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{
	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:hover .hover-state{
	display: block;
}

.portfolio-item{
	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>

Div不会在悬停时显示

3 个答案: