CSS悬停无法正常工作

Question

我对 CSS 悬停有一些问题，我做错了什么？

我试图实现这一点，当我将鼠标悬停在图像上时，带有链接的透明 div 会覆盖它，因此您可以单击它并转到另一个页面。 将鼠标悬停在新闻上时类似于此页面 http://sputniknews.com/ 上的内容

当我将鼠标悬停在 image 上时，标签不在并且悬停未正确显示。 多次被这个更改的代码卡住，不知道该怎么办

.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;
}

这样做的原因是绝对定位是相对于具有显式声明其位置属性的元素的第一个父元素。由于 .person 类没有声明位置，因此将 position: absolute 放在子元素上假定您的意思是相对于页面定位它。

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>