当你将鼠标悬停在它上面时,我希望显示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
}
答案 0 :(得分:1)
小提琴:https://jsfiddle.net/172ja79b/2/
我的小提琴并不是一个非常好的设计,但确实有效。
这里有两个错误:
所以我在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>