鼠标经过时边框样式左上角右上角动画

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

});

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,937评论 0 1
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,958评论 1 45
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,233评论 0 11
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,786评论 0 8
  • 有问题留言~ iOS11 1.导航栏图层变化 titleView和barbutton都需要根据版本适配titleV...
    SuyChen阅读 1,310评论 3 15