html鼠标悬停位置,html – 当我将鼠标悬停在其上时,我想隐藏图像并在其位置显示文本...
生活随笔
收集整理的這篇文章主要介紹了
html鼠标悬停位置,html – 当我将鼠标悬停在其上时,我想隐藏图像并在其位置显示文本...
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
不確定我是否理解你想要的東西,但這對你有用嗎？
初始案例
#wrapper {
position: relative;
}
.text {
opacity: 0;
position: absolute;
bottom: 0;
}
.hover:hover {
opacity: 0;
}
.hover:hover + .text {
opacity: 1;
}
text
?擴(kuò)展案例
#wrapper {
display: inline-block;
position: relative;
}
.text {
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: opacity .5s;
background: rgba(0, 0, 0, .5);
color: white;
margin: 0;
padding: 10px;
}
.hover {
display: block;
}
#wrapper:hover .text {
opacity: 1;
}
text
?總結(jié)
以上是生活随笔為你收集整理的html鼠标悬停位置,html – 当我将鼠标悬停在其上时,我想隐藏图像并在其位置显示文本...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql数据库常用sql语句
- 下一篇： nginx 面试题