如何顯示一個div在它上面盤旋

我想讓div .disco-sopra在你懸停時顯示。我從字面上嘗試了一切。這可能與我正在使用的許多z-index有關，但我不知道該怎麼做。這一切都在這裏：http://jsfiddle.net/172ja79b/如何顯示一個div在它上面盤旋

這裏的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 
}

來源

2015-09-15 gab

原因是你無法從盤旋在孩子叫家長，而相反的是可能的。所以我想只有可能的方式是使用JavaScript/JQuery。 – divy3993

你想要什麼特別的，我想我可能有解決方案，只用CSS。沒有JavaScript/JQuery。 – divy3993

如果我正在閱讀此權限，您想要在展開div時顯示該div嗎？首先，如果你不顯示它，你不能懸停一個div。你可以設法做到這一點與不透明度取決於你需要什麼。 – Ozan

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

我的小提琴是不是真的很好的設計，但它確實有效。

有2個錯誤的位置：

迪斯科迪索普拉沒有可打印的內容（或高度和寬度），所以即使懸停事件被觸發，不會有事的。
指向未渲染的空間是相當困難的

所以我把在迪索普拉的東西，創造了一個CSS行：

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

這樣，如果父元素得到的懸停它觸發器

來源

2015-09-15 21:52:12

這個作品，謝謝你！ – gab

您無法懸停未顯示的元素。只要你爲你的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>

來源

2015-09-15 21:52:19 Ozan

我試過了，但它仍然不起作用：/ – gab

如何顯示一個div在它上面盤旋

回答

相關問題