CSS悬停不能正常工作
问题描述:
我有一些CSS悬停问题,我做错了什么?CSS悬停不能正常工作
我试图实现,当我把鼠标悬停在图像上,透明div与其中的链接覆盖它,所以你可以点击它,并转到另一个页面。 类似于此页面上的东西http://sputniknews.com/当鼠标悬停在新闻上时
当我将鼠标悬停在图片上时,标记已停用并且悬停显示不正确。 与此滞留改变代码很多次了,不知道该怎么办
.cvr:hover {
background-color: rgba(0, 0, 0, 0.600);
height: inherit;
width: inherit;
float: left;
position: absolute;
left: 0px;
top: 0px;
visibility: visible;
}
.link {
word-break: normal;
word-wrap: break-word;
display: block;
height: inherit;
width: inherit;
text-align: center;
text-decoration: none;
color: aliceblue;
visibility: hidden;
}
.cvr:hover>.link {
visibility: visible;
}
.img {
width: inherit;
height: inherit;
}
.clear {
clear: both;
}
<div class="person">
<img class="img" src="http://www.gene-quantification.de/logo-img-cz.png">
<div class="cvr">
<a class="link" href="#"> link text is here</a>
</div>
</div>
<div class="person">
<img class="img" src="http://www.gene-quantification.de/logo-img-cz.png">
<div class="cvr">
<a class="link" href="#"> link text is here</a>
</div>
</div>
<div class="clear"></div>
答
您需要的:hover
伪选择适用于您,希望有此状态期间出现的元素的父。
当前,您已将它应用于.cvr
,您需要在包含父元素的元素上声明该规则;这是.person
。
.cvr {
background-color: rgba(0, 0, 0, 0.600);
height: 100%;
width: inherit;
float: left;
position: absolute;
left: 0px;
transition: .7s;
right: 0px;
opacity: 0;
bottom: -500px;
visibility: visible;
}
.link {
word-break: normal;
word-wrap: break-word;
display: block;
height: inherit;
width: inherit;
text-align: center;
text-decoration: none;
color: aliceblue;
}
.img {
width: 100%;
height: auto;
}
.clear {
clear: both;
}
.person:hover .cvr {
bottom: 0px;
opacity: 1;
}
.person {
display: inline-block;
position: relative;
overflow: hidden;
height: auto;
}
<div class="person">
<img class="img" src="http://www.gene-quantification.de/logo-img-cz.png">
<div class="cvr">
<a class="link" href="#"> link text is here</a>
</div>
</div>
<div class="person">
<img class="img" src="http://www.gene-quantification.de/logo-img-cz.png">
<div class="cvr">
<a class="link" href="#"> link text is here</a>
</div>
</div>
<div class="clear"></div>
答
有多种方式来实现这一目标。 我建议你在你的容器上使用一个相对位置,并在你的链接容器上绝对定位。您可以使用RGBA颜色与透明度也发挥:
background-color: rgba(0,0,0,0);
前三个值代表RGB颜色代码,最后表示0不透明度为1
我稍微改变了你的HTML等等你上课对他们的功能更具代表性。 这里有一个演示:https://jsfiddle.net/ecpb6tre
答
你想要做的是补充一点:
.cvr {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
然后,添加:
.person {
position: relative;
}
这部作品的原因是,绝对定位是相对于要素第一个拥有显式声明的position属性的父级。由于.person类没有声明位置,因此在子元素上放置位置:绝对值假定您的意思是将其相对于页面放置。
答
请尝试此代码,它的工作原理。
<style>
.person { position:relative; width:50%; }
.person .cvr { display:none; background-color: rgba(0, 0, 0, 0.600); height: 100%; width: 100%; position: absolute; left: 0px; top: 0px; visibility: visible; }
.person:hover .cvr { display:block; }
.person img { width:100%; }
.person .textdiv { display:table; height: 100%; width: 100%; }
.person .cvr a { display: table-cell; text-align: center; text-decoration: none; color: aliceblue; vertical-align: middle; }
</style>
<div class="person">
<img class="img" src="http://www.gene-quantification.de/logo-img-cz.png">
<div class="cvr">
<div class="textdiv"><a class="link" href="#"> link text is here</a></div>
</div>
</div>
<div class="person">
<img class="img" src="http://www.gene-quantification.de/logo-img-cz.png">
<div class="cvr">
<div class="textdiv"><a class="link" href="#"> link text is here</a></div>
</div>
</div>