我試圖弄清楚如何使用懸停來隱藏一個文本,而當您將滑鼠懸停在其區域時,另一個文本將顯示在其位置。我嘗試了 2 種不同的方法,但這兩種方法似乎不起作用:
<div id = "Area">
<span id="name">big-name-1234156</span>
<span id="name2">small-name</span>
</div>
#name {
position: absolute;
top: 0px;
left: 0px;
}
#name2 {
position: absolute;
top: 0px;
left: 0px;
opacity: 0;
}
#Area:hover .name {
opacity: 0;
}
#Area:hover .name2 {
opacity: 1;
}
#name:hover {
opacity: 0;
}
#name:hover #name2 {
opacity: 1;
}
當我將滑鼠懸停在文本上時,它們都位于同一位置時,如何隱藏“名稱”并顯示“名稱 2”?我只是不知道我在這里做錯了什么或如何解決它。
uj5u.com熱心網友回復:
relative
如果容器內有absolute
元素,則更好地制作容器。也最好保持一個不是絕對的,這樣它會占用流量的空間。
您可以添加過渡以獲得不那么戲劇化的效果。
#Area {
position:relative;
}
#name {
opacity: 1;
transition: 0.5s;
}
#name2 {
position: absolute;
top: 0px;
left: 0px;
opacity: 0;
transition: 0.5s;
}
#Area:hover #name {
opacity: 0;
}
#Area:hover #name2 {
opacity: 1;
}
before
<div id="Area">
<span id="name">big-name-1234156</span>
<span id="name2">small-name</span>
</div>
after
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/512271.html
標籤:css