我有一個縮略圖庫,其路徑是從檔案中動態加載的,并使用float:left. 每行由<br style="clear:both">標簽分隔。
我想在懸停時在每個影像上顯示特定于每個影像的導航按鈕。
我一直在按照

uj5u.com熱心網友回復:
這里的訣竅是要意識到你不能將滑鼠懸停在隱藏的元素上。將要隱藏的內容包裝在一個跨度中。
.container {
display: flex;
justify-content: center;
}
.img_container {
position: relative;
}
.menu {
position: absolute;
top:0;
display: flex;
flex-direction: column;
align-items:center;
border:solid 1px red;
width:100px;
}
.menu button {
visibility: hidden;
}
.menu:hover button {
visibility: visible;
width:80px;
}
<div class='container'>
<div class="img_container">
<img class="menu_image" src="https://via.placeholder.com/100x200">
<div class="menu">
<button>Floor Plan</button>
<button>History</button>
<button>Ownership</button>
</div>
</div>
<div class="img_container">
<img class="menu_image" src="https://via.placeholder.com/100x200">
<div class="menu">
<button>Floor Plan</button>
<button>History</button>
<button>Ownership</button>
</div>
</div>
</div>
轉載請註明出處,本文鏈接:https://www.uj5u.com/gongcheng/483164.html
