在还原一个网站时有这个效果,下面用原生的h5+css+js 实现。
首先我们看这个例子,鼠标悬停时,校园对应的样式改变,并且通过把display设置为none 的div盒子从隐藏变为显示,但是当我想要鼠标移动离开后也能保持悬停,这里就需要操纵js.
最终效果请翻到最下面取。
鼠标离开后没了
废话不多说上代码:
原来的:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="control">
<div class="school">校园
<div class="school_news">
校园信息
</div>
</div>
<div class="message">公告
<div class="message_news">
公告信息
</div>
</div>
</div>
</body>
</html>
<style>
/* 让他水平排列,并且居中 */
.control{
display: flex;
justify-content: center;
}
/* 两个都给他初始宽度、高度、颜色、距离、居中样式(注意同时给样式要用 , 隔开) */
.school,.message{
width: 100px;
height: 26px;
background-color: orange;
margin-right: 20px;
text-align: center;
}
/* hover状态就是鼠标悬停以后的样式 */
.school:hover,.message:hover{
background-color: orangered;
color: white;
}
/* 设置为none就隐藏了 */
.school_news , .message_news{
display: none;
}
/* .school:hover .school_news的意思就是 当school这个属性鼠标悬停时 它所属的school_news 样式发生改变 */
/* 这里还是一样 逗号分隔,意思和前面的schoole一样, */
.school:hover .school_news , .message:hover .message_news{
width: 100px;
height: 200px;
color: black;
background-color: #F7F2E4;
display: inline-block;