html鼠标悬停位置,html – 当我将鼠标悬停在其上时,我想隐藏图像并在其位置显示文本...

不确定我是否理解你想要的东西,但这对你有用吗？

初始案例

#wrapper {

position: relative;

}

.text {

opacity: 0;

position: absolute;

bottom: 0;

}

.hover:hover {

opacity: 0;

}

.hover:hover + .text {

opacity: 1;

}

text

​

扩展案例

#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

​