代码
Html代码:
<div>
<ul>
<li>
<a href="#">视频</a>
</li>
<li>
<a href="#">贴吧</a>
</li>
<li>
<a href="#">学术</a>
</li>
<li class="more">
<a href="#">更多</a>
<img src="https://webstatic.mihoyo.com/ys/event/e20210317-fab/images/bg.fc8c01f4.jpg" alt="">
</li>
</ul>
</div>
CSS代码:
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #424242;
}
ul {
list-style: none;
}
li {
float: left;
font-size: 20px;
height: 20px;
line-height: 20px;
margin: 10px 20px;
}
img {
width: 200px;
display: none;
position: absolute;
top: 0;
}
.more:hover img {
display: block;
}
声明:
本文采用
BY-NC-SA
协议进行授权,如无注明均为原创,转载请注明转自
Eric · 梦曦
本文地址: 实例:鼠标划入显示图片效果
本文地址: 实例:鼠标划入显示图片效果