鼠标经过按钮样式改变,动画过渡
HTML部分:
<div class="wrap">
<div class="top"></div>
<div class="bottom"></div>
幽灵按钮
</div>
CSS部分:
* {
margin: 0;
padding: 0
}
.wrap {
width: 300px;
margin: 50px auto;
height: 80px;
line-height: 80px;
text-align: center;
color: #fff;
background-color: #105069;
font-size: 36px;
font-weight: bold;
position: relative;
transition: 1s;
}
.wrap .top,
.wrap .bottom {
width: 0;
height: 5px;
background-color: #105069;
position: absolute;
transition: 1s;
}
.wrap .top {
top: 0;
left: 0
}
.wrap .bottom {
bottom: 0;
right: 0
}
.wrap:hover .top,
.wrap:hover .bottom{
width: 100%;
}
.wrap:hover {
background-color: #15afc7;
color: #105069;
}
js实现 利用鼠标经过移出(去掉css中:hover部分的代码)
window.onload = function () {
var wrap = document.querySelector(".wrap");
var divs = wrap.getElementsByTagName('div');
wrap.onmouseover = function () {
divs[0].style.width = "100%";
divs[1].style.width = "100%";
wrap.style.backgroundColor = "#15afc7";
wrap.style.color = "#105069";
};
wrap.onmouseout = function () {
divs[0].style.width = 0;
divs[1].style.width = 0;
wrap.style.backgroundColor = "#105069";
wrap.style.color = "#fff";
}
}