鼠标hover到div上，给该行div增加样式，纯css

最新推荐文章于 2022-08-16 15:15:26 发布

diaoyuzhi7228

最新推荐文章于 2022-08-16 15:15:26 发布

阅读量1.1k

点赞数

原文链接：http://www.cnblogs.com/haixiahuang/p/8295181.html

版权

线上效果图：

上代码

如有需要请参考代码：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
li{
width: 500px;
height: 40px;
margin:10px;
background: #ccc;
text-align: center;
}
li span {
display: none;
}
li:hover span{
display: inline;
}
li:hover+span{
display: inline;

}
</style>
</head>
<body>
<ul>
<li>-1-</li>
<li>-2-</li>
<li>-3-</li>
<li>-4-</li>
<li>-5-</li>
<li>-6-</li>
</ul>

<!-- *利用hover修改其它标签样式
hover可以修改包含在它里面的元素的样式。也可以通过兄弟元素“+”来修改外面元素的样式：

注意：兄弟元素必须有相同的父节点，且紧紧相邻（之间不能有任何其他标签）。 -->

</body>
</html>

转载于:https://www.cnblogs.com/haixiahuang/p/8295181.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

diaoyuzhi7228

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标hover到div上，给该行div增加样式，纯css

线上效果图：上代码如有需要请参考代码：<!DOCTYPE html><html><head> <title></title> <style> li{ width: 500px; height: 40px; margin:10px; background: #ccc; tex...
复制链接

扫一扫