要求:
当鼠标悬靠在第四个标签上时,弹出图片如下图:
过程:
先用HTML做出基本框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="五彩导航.css">
</head>
<body>
<ul>
<li><a class="son1" href="#">五彩导航</a>
</li>
<li><a class="son2" href="#">五彩导航</a>
</li>
<li><a class="son3" href="#">五彩导航</a>
</li>
<li><a class="son4"href="#">五彩导航</a>
</li>
</ul>
</body>
</html>
再用css将其功能实现
ul li{
display: inline-block;
margin :0 outo;
}
ul li a{
display: inline-block;
text-decoration: none;
width: 100px;
height: 200px;
background-repeat: no-repeat;
font-size: 20px;
color: black;
}
.son1{
width: 300px;
background-image: url(../images/bg1.png);
}
.son2{
width: 300px;
background-image: url(../images/bg2.png);
}
.son3{
width: 300px;
background-image: url(../images/bg3.png);
}
.son4{
width: 300px;
background-image: url(../images/bg4.png);
position: relative;
}
.son4:hover>.goardson
{
display: block;
}
.goardson{
top:60px;
right:180px;
position: absolute;
width: 100px;
padding: 0px;
display: none;
}
效果图:
效果基本一致实验完成。