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");

});