Web前端 鼠标控制图片的显隐 代码
HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用CSS绘制图形</title>
<link rel="stylesheet"href="css/new_file.css"type="text/css"/>
</head>
<body>
<div class="box">
<div class="word">
<span>名校校徽</br>请勿点击</span>
</div>
</div>
</body>
</html>
img文件
CSS部分
body{
background: chartreuse;
}
.box{
width:300px;
height:300px;
margin:100px auto;
background:url(../img/123.png) no-repeat 0 0/cover;
border-radius:50%;
}
.word{
display: none;
width:300px;
height:185px;
background:rgba(0,0,0,0,0.5);
padding-top:120px;
font-size:20px;
font-weight:600;
color:red;
text-align:center;
border-radius:50%;
}
.box:hover .word{
display:block;
}