CSS悬停不能正常工作

Question

我有一些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>

Answer 1

您需要的: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>

Answer 2

有多种方式来实现这一目标。 我建议你在你的容器上使用一个相对位置，并在你的链接容器上绝对定位。您可以使用RGBA颜色与透明度也发挥：

background-color: rgba(0,0,0,0); 

前三个值代表RGB颜色代码，最后表示0不透明度为1

我稍微改变了你的HTML等等你上课对他们的功能更具代表性。 这里有一个演示：https://jsfiddle.net/ecpb6tre

Answer 3

你想要做的是补充一点：

.cvr { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

然后，添加：

.person { 
    position: relative; 
} 

这部作品的原因是，绝对定位是相对于要素第一个拥有显式声明的position属性的父级。由于.person类没有声明位置，因此在子元素上放置位置：绝对值假定您的意思是将其相对于页面放置。

Answer 4

请尝试此代码，它的工作原理。

<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>