<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<style>
.box {
position: relative;
width: 150px;
height: 40px;
background-color: #ccc;
text-align: center;
line-height: 40px;
color: #efefef;
/*鼠标样式 cursor crosshair 十字架
pointer 小手 move 移动 text 文本 help 问号
*/
cursor: pointer;
cursor:pointer;
/*把光标变成小手 把光标变成小手*/
}
/*光标 cursor 光标 cursor* pointer指针pointer指针 pointer/
/*定位和浮动会把块级和行内元素会转换为行内块*/
img{
position: absolute;
left:20px;
top:40px;
/*隐藏一个元素 display:none*/
display: none;
}
.box:hover img {
/*显示属性 display:block*/
display: block;
}
/*元素：hover 鼠标移入时触发该元素*/
/*元素前：hover :元素后 鼠标移入元素前时触发元素后*/
</style>
</head>
<body>
<div class="box">我的京东</div>
<!--:hover 只能做到鼠标移入父元素让里面的子元素从隐藏转换为显示 不能是兄弟关系-->
<!--hover只能做到鼠标移入父元素让里面的子元素从隐藏转换为显示 不能是兄弟关系-->
<img src="mobile_qrcode.png" alt="">
</body>
</html>
511
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
