如何显示div悬停在它上面

时间:2015-09-15 21:23:30

标签: html css

当你将鼠标悬停在它上面时,我希望显示div .disco-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
}

2 个答案:

答案 0 :(得分:1)

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

我的小提琴并不是一个非常好的设计,但确实有效。

这里有两个错误:

  1. disco-sopra没有可打印的内容(或高度和宽度),因此即使触发了悬停事件,也不会发生任何事情。
  2. 指向一个没有渲染的空间是相当困难的
  3. 所以我在sopra中添加了一些内容并创建了一个CSS行:

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

    这样,如果父元素获得悬停,则触发

答案 1 :(得分:1)

您无法悬停未显示的元素。只要您为div设置了display: none,就不能将鼠标悬停在它上面。

你有两种选择;要么将鼠标悬停在父元素上以显示子元素,要么使用不透明度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>