这是完美版(不在勉强),绝对的按照要求(我走了)
小特效,代码好长~
不知道有没有更简便的方法呢~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.hide:hover {
color: black;
position:absolute;
}
.hide {
color: rgba(0, 0, 0, 0); /*透明*/
}
.see {
color: black;
}
.see:hover {
position:absolute;
color: rgba(0, 0, 0, 0); /*透明*/
}
:hover.still { /*这个为了避免鼠标在旁边悬停的bug*/
color: rgba(0, 0, 0, 0);
}
</style>
</head>
<body>
<span class="hide"><span class="see">aaa</span><span class="still">ddd</span></span>
</body>
</html>
|