在相同位置上懸停顯示div

我想在鼠標懸停上顯示div，但它閃爍，我如何顯示/隱藏沒有任何混蛋並平滑過渡？在相同位置上懸停顯示div

我試過淡入淡出使用jquery，但仍閃爍。

下面是代碼

body { 
 
\t margin: 0; 
 
} 
 
.row { 
 
\t float: left; 
 
\t width: 100%; 
 
} 
 
.col { 
 
\t float: left; 
 
\t width: 25%; 
 
\t position: relative; 
 
\t margin: 0 10px 0 0; 
 
} 
 
.front { 
 
\t width: 100%; 
 
\t height: 300px; 
 
\t background-color: #999 
 
} 
 
.back { 
 
\t position: absolute; 
 
\t left: 0; 
 
\t top: 0; 
 
\t height: 300px; 
 
\t opacity: 0; 
 
\t visibility: hidden; 
 
\t background-color: #ff0; 
 
\t z-index: 2; 
 
\t width: 100%; 
 
} 
 
.front:hover + .back { 
 
\t opacity: 1; 
 
\t visibility: visible; 
 
}

<div class="row"> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
</div>

來源

2017-09-04 Sanjeev Kumar

您的問題是，如果後面的div顯示出來，你不再懸停在前面的div，因此它就會消失，所以你在徘徊前面的div再次，所以後面的div重新出現 - 等廣告噁心。如果我是你，我會使用JS或JQuery的'mouseenter' /'mouseleave'方法 – Tijmen

@Tijmen我認爲JavaScript也需要，直到我看到下面的答案 – Script47

@ Script47是的，我甚至沒有考慮過僅CSS解決方案，這可能會更好。 – Tijmen

它閃爍，因爲每一個.back變得可見時，懸停在.front不再有效。爲了解決這個你可以設置.back:hover可以通過使用相同的CSS樣式做了.back:hover爲.front:hover + .back

body { 
 
\t margin: 0; 
 
} 
 
.row { 
 
\t float: left; 
 
\t width: 100%; 
 
} 
 
.col { 
 
\t float: left; 
 
\t width: 25%; 
 
\t position: relative; 
 
\t margin: 0 10px 0 0; 
 
} 
 
.front { 
 
\t width: 100%; 
 
\t height: 300px; 
 
\t background-color: #999 
 
} 
 
.back { 
 
\t position: absolute; 
 
\t left: 0; 
 
\t top: 0; 
 
\t height: 300px; 
 
\t opacity: 0; 
 
\t visibility: hidden; 
 
\t background-color: #ff0; 
 
\t z-index: 2; 
 
\t width: 100%; 
 
} 
 
.front:hover + .back, 
 
.back:hover { 
 
\t opacity: 1; 
 
\t visibility: visible; 
 
}

<div class="row"> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
</div>

來源

2017-09-04 15:10:01 Dij

.back爲可見的可見性是什麼，如果你把.back元素中.col元素，將.front元素樣式設置爲.col元素並將transition添加到.col元素？鑑於瀏覽器的支持，我認爲這是一個更好的解決方案。

body { 
 
    margin: 0; 
 
} 
 
.row { 
 
    float: left; 
 
    width: 100%; 
 
} 
 
.col { 
 
    float: left; 
 
    width: 25%; 
 
    position: relative; 
 
    margin: 0 10px 0 0; 
 
    height: 300px; 
 
    background-color: #999 
 
} 
 
.back { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    height: 300px; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    background-color: #ff0; 
 
    z-index: 2; 
 
    width: 100%; 
 
    transition: all 0.2s; 
 
} 
 
.col:hover .back { 
 
    opacity: 1; 
 
    visibility: visible; 
 
}

<div class="row"> 
 
    <div class="col"> 
 
    This is front part 
 
    <div class="back">This is back part</div> 
 
    </div> 
 
    <div class="col"> 
 
    This is front part 
 
    <div class="back">This is back part</div> 
 
    </div> 
 
    <div class="col"> 
 
    This is front part 
 
    <div class="back">This is back part</div> 
 
    </div> 
 
</div>

來源

2017-09-04 15:10:10

把'back'放在'front'裏面有錯誤的語義。 – Bergi

@Bergi，但爲什麼？ –

因爲一個是列的正面，另一個是列的背面。後面不是前面的一部分。 – Bergi

body { 
 
\t margin: 0; 
 
} 
 
.row { 
 
\t float: left; 
 
\t width: 100%; 
 
} 
 
.col { 
 
\t float: left; 
 
\t width: 25%; 
 
\t position: relative; 
 
\t margin: 0 10px 0 0; 
 
} 
 
.front { 
 
\t width: 100%; 
 
\t height: 300px; 
 
\t background-color: #999 
 
} 
 
.back { 
 
\t position: absolute; 
 
\t left: 0; 
 
\t top: 0; 
 
\t height: 300px; 
 
\t opacity: 0; 
 
\t visibility: hidden; 
 
\t background-color: #ff0; 
 
\t z-index: 2; 
 
\t width: 100%; 
 
} 
 
.col:hover > .back { 
 
\t opacity: 1; 
 
\t visibility: visible; 
 
}

<div class="row"> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
</div>

.col:hover > .back { 
    opacity: 1; 
    visibility: visible; 
}

我有一個簡單的解決方案。

更改.front:hover + .back =>.col:hover > .back。

來源

2017-09-04 15:10:31 zynkn

的問題是，當你將鼠標懸停.front格出現.back格，所以現在你徘徊在.back格設置不.front所以它再次消失，循環繼續。要解決此問題，請將懸停效果添加到.back格。將transition加到.back以獲得平滑效果。

body { 
 
\t margin: 0; 
 
} 
 
.row { 
 
\t float: left; 
 
\t width: 100%; 
 
} 
 
.col { 
 
\t float: left; 
 
\t width: 25%; 
 
\t position: relative; 
 
\t margin: 0 10px 0 0; 
 
} 
 
.front { 
 
\t width: 100%; 
 
\t height: 300px; 
 
\t background-color: #999 
 
} 
 
.back { 
 
\t position: absolute; 
 
\t left: 0; 
 
\t top: 0; 
 
\t height: 300px; 
 
\t opacity: 0; 
 
\t visibility: hidden; 
 
\t background-color: #ff0; 
 
\t z-index: 2; 
 
\t width: 100%; 
 
    transition: 0.2s ease; 
 
} 
 
.front:hover + .back, .back:hover { 
 
\t opacity: 1; 
 
\t visibility: visible; 
 
}

<div class="row"> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
</div>

來源

2017-09-04 15:14:08 FrydrykChopin

主要的問題是，你有沒有能告訴誰真正「筍」的「動畫」。 front和back都處於同一級別，所以無法從該級別執行此操作，但是如果通過父元素拍攝它，它應該可以工作。

的做法是如下：

.col:hover .back { 
    opacity: 1; 
    visibility: visible; 
}

來源

2017-09-04 15:15:19

在相同位置上懸停顯示div

回答

相關問題