怎么实现当鼠标移动到文字上面时，背景才变色啊

例如：

</div>

当鼠标移动到变色两个字上面时后面的div背景变色

ssszz 2018-10-16

源自：项目：网页布局案例 2-10 作业题

收起

1回答

妮可妮可妮_ 回答被采纳获得+3积分 2018-10-16 19:06:26

使用:hover伪类,当鼠标移到元素上时,在此元素添加特殊的样式:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
a {
display: block;
width: 150px;
height: 150px;
line-height: 150px;
text-align: center;
text-decoration: none;
}

a:hover {
background-color: red;
}
</style>
</head>

<body>
<div width=“150px” height=“150px”>
<a href="#">变色</a>
</div>
</body>

</html>

祝学习愉快!

收起回答

ssszz 提问者 #1

老师不行啊，这个效果当移动到a标签的有效区域以后背景色就开始变化，可要求实现的效果是必须要移动到“变色”两个字上后方区域才开始变色。。。

2018-10-16 19:22:40
妮可妮可妮_ 回复提问者 ssszz #2

你好同学,作业中顶部导航项就可以参考上图所示思路实现效果,目前我们所学的知识还不能实现同学所描述的效果,需要后期学习js来实现,祝学习愉快!

2018-10-16 19:29:20
ssszz 提问者 #3

就是作业中导航实现的效果，我看演示视频中显示的当鼠标移动到了HOME、ABOUT等字上时后方的背景变为了黑色，如果我直接将a标签或li标签设置hover属性，那么当鼠标进入那块区域以后不等移动到字上，背景就会变色了。

2018-10-16 19:31:46