CSS 悬停无法正常工作

Question

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

我正在尝试实现这一点，当我将鼠标悬停在图像上时，透明的 div 和其中的 link 覆盖它，以便您可以单击它并转到另一个页面。将鼠标悬停在新闻

上时，类似于此页面 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

有多种方法可以实现这一点。我建议您在容器上使用相对位置，在 link 容器上使用绝对位置。你也使用 rgba 颜色来玩不透明度：

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

前三个值代表RGB颜色代码，最后一个代表从0到1的不透明度。

我稍微改变了你 html，这样你 class 更能代表他们的职能。这是一个演示：https://jsfiddle.net/ecpb6tre

Answer 2

你要做的是添加这个：

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

然后，添加：

.person {
    position: relative;
}

之所以可行，是因为绝对定位是相对于明确声明其位置属性的第一个父元素而言的。由于 .person class 没有声明任何位置，将 position: absolute 放在子元素上假定您的意思是相对于页面定位它。

Answer 3

请尝试此代码，它有效。

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

Answer 4

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

CSS 悬停无法正常工作

CSS Hovering not working correctly

css

hyperlink

hover