鼠标放上去从背景颜色从中间开始变化

Posted 2020-10-22 不积跬步无以至千里不积小流无以成江海

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鼠标放上去从背景颜色从中间开始变化相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
.caseMore {
    width:186px;height:44px;line-height:44px;text-align: center;margin:0 auto;border:1px dashed #f38900;margin-bottom:20px;    
}
.caseMore  a {
    position: relative;z-index:22;text-decoration: none;color:#333;
}
.caseMore  a .moreI {
    transition:all 0.4s ease 0s;-webkit-transition:all 0.4s ease 0s;
    transition:all 0.4s ease 0s;width:0;height:44px;position: absolute;
    color:red;left:50%;margin-left:0;top:50%;margin-top:-22px;z-index:1;

}
.caseMore:hover  a  .moreI {
    background-color: red;
    width:186px;
    /*border-radius:5px;*/
    margin-left:-93px;
    z-index:-111;
}
.caseMore:hover a {
    color:#fff;

}
    </style>
</head>
<body>
    <div class="caseMore">
             <a href="#" style="display:block;width:100%;height:100%;">
                  MORE
                  <i class="moreI"></i>
             </a>
         </div>          
</body>
</html>

以上是关于鼠标放上去从背景颜色从中间开始变化的主要内容，如果未能解决你的问题，请参考以下文章

Bootstrap鼠标放上去时怎么改变背景颜色？

el-button鼠标放上去调整颜色hover

css3 实现鼠标放上去图片外框不变大，里面中心放大

鼠标悬浮DIV上时改变DIV的背景图片和字体颜色，搞清楚是背景图片不是背景颜色，我写的但是报语法错

DW中鼠标经过字体时字体的颜色逐渐变化，CSS怎么做

鼠标放上去会变化

鼠标放上去 从背景颜色从中间开始变化

鼠标放上去从背景颜色从中间开始变化