Question

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

当我将鼠标悬停在图片上时，我试图实现这一点，透明的div中包含一个链接，因此您可以点击它并转到另一个页面。当将鼠标悬停在新闻

上时，此页面上的内容类似http://sputniknews.com/

当我将鼠标悬停在图片上方时，标记已停止并且悬停未正确显示。多次使用此更改代码，不知道该怎么做

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

实现这一目标有多种方法。我建议你在你的容器上使用一个位置相对位置并在你的链接容器上定位绝对位置。您也可以使用rgba颜色来播放不透明度：

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

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

我稍微改变了你的HTML，以便你的课程更能代表他们的功能。这是一个演示：https://jsfiddle.net/ecpb6tre

Answer 2

您需要将:hover伪选择器应用于您希望在此状态下显示的元素的父级。

目前，您已将其应用于.cvr，您需要在包含父元素的元素上声明该规则;这是.person。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

你想要做的是添加：

var f = [
    {
        "type": "Feature",
        "properties": {
            "years": "1972-1974",
         }
    },
     {
        "type": "Feature",
        "properties": {
            "years": "1975-1978",
         }
    }];



function formatYears(features) {
  features.forEach(function(feature){
    var fromto = feature.properties.years.split('-');
    var years = [];
    for (var y = +fromto[0]; y <= fromto[1]; ++y)
      years.push(y);
    feature.properties.years = years;
  });
}

formatYears(f)

console.log(f.map(f => f.properties.years))

然后，添加：

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

这个工作的原因是绝对定位是相对于明确声明它的位置属性的元素第一个父元素。由于.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>

CSS悬停无法正常工作

4 个答案: