如何显示悬停在上面的div

Question

我希望当您将鼠标悬停在div .div sopra上时显示它。我真的什么都试过了。这可能与我正在使用的许多z-index有关，但我不知道该怎么办。都在这里了：http://jsfiddle.net/172ja79b/

下面是HTML代码：

<div class="disco-lionheart">
<div class="disco-sopra">
<a href=""><div class="disco-table2">
<div class="disco-link"><i class="fa fa-search"></i></div>
</div>
</a>
</div>

<div class="disco-sotto">
<div class="disco-table"><div class="disco-table-testo">
<div class="disco-anno">2015</div>
          <div class="disco-title">Lion Heart</div>
<div class="disco-info"><i class="fa fa-calendar"></i> 19 agosto 2015<span class="Block"></span><i class="fa fa-bars"></i> 12 tracce</div>

</div></div>
</div>

<div class="ombra"></div>
</div>

下面是CSS代码：

.disco-lionheart {
  width: 350px;
  height: 350px;
  background-position: top center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-bottom: 20px;
  margin-right: 20px;
  float:left;
  position: relative;
  z-index:1;
  background-image:url(http://www.girlsgenerationitalia.it/wp-content/themes/ggi1/media/img/discografia/lionheart-500.jpg);
}

.disco-anno {
  vertical-align: middle;
background-color: #fff;
font-size: 13pt;
padding: 2px;
padding-left: 5px;
padding-right: 5px;
color: #fff;
background-image:url(http://www.girlsgenerationitalia.it/wp-content/themes/ggi1/media/img/discografia/bgdisco.jpg);
background-position:center;
font-weight: 800;
z-index: 10000000;
margin: auto;
width: 43px;
}

.disco-table {
display:table;
width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
z-index: 1;
}

.disco-title {
  font-size: 19pt;
  line-height: 21pt;
  font-weight: 300;
  color:#fff;
  text-transform: uppercase;
  font-weight: 800;

  z-index: 10000000;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, .6);

}

.disco-table-testo {
display:table-cell;
  vertical-align: middle;
text-align: center;
}

.disco-link {
display:table-cell;
  vertical-align: middle;
text-align: center;
z-index: 1111119999492848683824;
font-size: 150px;
}

.disco-table2 {
display:table;
width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
z-index: 1111111111111111;

}

.disco-sopra {
display:none;
width: 100%;
height: 100%;
z-index: 9999999999999898989898989898989898989898;
}

.disco-sotto {
width: 100%;
height: 100%;
z-index: 99999999999;
}

.disco-sopra:hover {
display:inline;
}

.disco-info {
  z-index: 1000000000;
  color: #fff;
  font-size: 13px;
  margin-left: 15px;
  margin-right: 15px;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, .6);
  text-transform: lowercase;
}

.disco-info i, .disco-link i {
  color: #fff;
}

.disco-info a:link, .disco-info a:visited {
  color: #fff;
}

.ombra {
  background-image:url(http://girlsgenerationitalia.it/wp-content/themes/ggi1/media/img/ombra.png);
  width: 100%;
  height:100%;
  position:absolute;
  top:0;
  z-index: -1
}

Answer 1

小提琴：https://jsfiddle.net/172ja79b/2/

我的小提琴并不是很好的设计，但它确实可以工作。

这里有两个错误：

1. disco-sopra没有可打印的内容(或高度和宽度)，所以即使触发了悬停事件，也没有什么东西会happen.
2. pointing到一个没有渲染的空间是相当困难的

因此，我在sopra中添加了一些内容，并创建了一个CSS行：

.disco-lionheart:hover .disco-sopra { display: inline; }

这样，如果父元素get悬停，就会触发

Answer 2

不能悬停未显示的图元。只要你已经为你的div设置了display: none，你就不能悬停在它上面。

您有两种选择；一种是观察悬停在父元素上以显示子元素，另一种是使用opacity css属性来显示该元素而不让用户看到它。当您将其设置为0时，元素仍然存在，因此可以将其悬停在其上，但除非用户将其悬停在其上，否则它将是不可见的。

​

div {
  height: 100px;
  width: 100%;
  background: blue;
  text-align: center;
}
div span {
  color: white;
}
.hover-to-see {
  opacity: 0;
}
.hover-to-see:hover {
  opacity: 1;
}

<div class="hover-to-see">
  <span>Magic!</span>
</div>
<p>Hover above to see the magic!</p>

​