鼠标经过时边框样式左上角右上角动画
html:
<div class="industryList">
<ul>
<li>
<div class="stry-top"></div>
<div class="stry-left"></div>
<div class="stry-bottom"></div>
<div class="stry-right"></div>
</li>
</ul>
</div>
css:
.industry .industryList li {
position: relative;
height: 270px;
width: 270px;
}
.stry-top {
position: absolute;
z-index: 99;
height: 2px;
width: 0px;
top: 0px;
left: 0;
width: 0px;
}
.stry-bottom {
position: absolute;
z-index: 99;
height: 2px;
width: 0%;
bottom: 0px;
right: 0px;
}
.stry-left {
height: 0;
position: absolute;
left: 0px;
width: 2px;
z-index: 99;
top: 0;
}
.stry-right {
height: 0;
z-index: 99;
position: absolute;
right: 0px;
width: 2px;
bottom: 0px;
}
js:
//行业云鼠标经过的样式
$(".industryList li").mouseenter(function () {
$(this).children("div:even").animate({
"width": "100%",
}, 500).css("background", "#ff0000");
$(this).children("div:odd").animate({
"height": "100%",
}, 500).css("background", "#ff0000");
});
$(".industryList li").mouseleave(function () {
$(this).children("div:even").animate({
"width": "0%",
}, 500).css("background", "#ff0000");
$(this).children("div:odd").animate({
"height": "0%",
}, 500).css("background", "#ff0000");
});
