悬停时用不同颜色的填充按钮

Question

当鼠标悬停在按钮上时，有没有使用CSS来实现上述效果？

谢谢！

Answer 1

您可以使用背景渐变来实现您的目标：

• 创建渐变，两个停止点为50％，两个颜色位于停靠点两侧。
• 使用background-size
使背景占据元素宽度的200％
• 让自己的背景位置为-100％
• 将背景移动到:hover上的位置。

注意：请务必在适当的位置添加浏览器前缀。

＆＃13;

＆＃13;

.menu{
    padding: 20px 40px;
    font-size: 32px;
    font-family: Arial, sans-serif;
    background: #F00;
    display: inline-block;
    background: linear-gradient(to right, #f8b3b5 0%, #f8b3b5 50%, #ffffff 50%, #ffffff 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    transition: background-position 0.3s;
}

.menu:hover{
    background-position:0 0;
}

＆＃13;

<div class='menu'>Menu</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这里有一个工作小提琴：http://jsfiddle.net/84fpp167/ 你基本上做了一个包装div，把你想要滑动的div放在它的绝对位置。然后你使用：悬停在包装器div上来转换幻灯片div的绝对位置，直到位置为左：0，速度为1秒。

 .wrapper {
     position: relative;
     overflow: hidden;
     width: 100px;
     height: 100px; 
     border: 1px solid black;
}
#slide {
     position: absolute;
     left: -100px;
     width: 100px;
     height: 100px;
     background: #FFADAD;
     transition: 1s;
     height:100%;
 }
.wrapper:hover #slide {
     transition: 1s;
     left: 0;
}

Answer 3

演示 - http://jsfiddle.net/victor_007/1y2jw6wh/

添加了伪元素:before和background-color

＆＃13;

＆＃13;

.menu {
  padding: 20px 40px;
  font-size: 32px;
  font-family: Arial, sans-serif;
  display: inline-block;
  position: relative;
}
.menu:before {
  content: '';
  background: #FFADAD;
  position: absolute;
  width: 0%;
  top: 0;
  left: 0;
  height: 100%;
  transition: 0.3s linear;
  z-index: -1;
}
.menu:hover:before {
  width: 100%;
}

＆＃13;

<div class='menu'>Menu</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

首先搜索堆栈

您必须阅读有关css过渡的内容，您将使用轻松和背景颜色属性。

http://www.w3schools.com/css/css3_transitions.asp

没有人为你编码，努力并与你自己做一些事情。

过渡陈列室 - http://codepen.io/davekilljoy/pen/wHAvb，弄乱代码以达到预期的效果。 Njoy！

发布类似问题：

form stack search 1

form stack search 2