<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<title></title> | |
<style> | |
.demo{ | |
border: 1px solid #ffffff; | |
width: 100px; | |
height: 100px; | |
text-align: center; | |
float: left; | |
} | |
.icon{ | |
width: 60px; | |
height: 56px; | |
background: url(img/tb01.png) no-repeat; | |
margin: 10px auto; | |
} | |
.demo:hover{ | |
border: 1px solid red; | |
cursor: pointer; | |
} | |
.demo:hover .icon{ | |
background: url(img/tb02.png) no-repeat; | |
} | |
.demo:hover .font{ | |
color: red; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="demo"> | |
<div class="icon"> | |
</div> | |
<div class="font"> | |
文本内容 | |
</div> | |
</div> | |
<div class="demo"> | |
<div class="icon"> | |
</div> | |
<div class="font"> | |
文本内容 | |
</div> | |
</div> | |
<div class="demo"> | |
<div class="icon"> | |
</div> | |
<div class="font"> | |
文本内容 | |
</div> | |
</div> | |
<div class="demo"> | |
<div class="icon"> | |
</div> | |
<div class="font"> | |
文本内容 | |
</div> | |
</div> | |
</body> | |
</html> | |
鼠标悬停图标
最新推荐文章于 2020-12-10 16:46:58 发布