Question

我有一个按钮，我想要滑动他的背景from #000 to #ccc。我的问题是如何在悬停或鼠标中心上进行按钮背景的幻灯片转换。可以用jQuery做到这一点吗？非常重要的是，我不想使用背景图像所以关于图像的所有建议.skip请。

这是一个令人烦恼的小提琴，只能用css创建但是只能从上到下工作，而不是从左到右，我需要什么。的 http://jsfiddle.net/xu3ck/166/

<a href="#" class="btn two">Submit Form</a>

.btn {
    width: 180px;
    text-decoration: none;
    height: 40px;
    border-radius: 10px;
    text-align: center;
    color: white;
    line-height: 40px;
    font-size: 20px;
    font-family: arial, sans-serif;
    margin: 20px;
    float: left;
    display: block;
     color: white;
    box-shadow: rgba(0,0,0,0.3) 1px 1px 3px inset;
}



.two {
    background: linear-gradient(#111, #eee);
    background-repeat: repeat;
    background-size: 100% 200%;
    transition: all .5s linear;
}

.two:hover, .two:focus, .two:active {
    background-position: 0 -200%;
}

TY。

Answer 1

这个例子的作用是在按钮上创建一个liniar背景，该按钮跨越200％的按钮高度。当鼠标移过按钮时，它会将背景向上移动200％我改变的是，我将渐变从“从上到下”改为“从左到右”。设置宽度为200％而不是高度，在悬停时我将背景设置为200％。

我在此JsFiddle

中修复了它

我改变了以下内容：

background: linear-gradient(#111, #eee);
为了
background: linear-gradient(to right, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);

background-size: 100% 200%;
为了
background-size: 200% 100%;

和
background-position: 0 -200%;
为了
background-position: -200% 0;

Answer 2

您可以使用与{8}兼容的:before和:after伪元素。不需要jQuery。只是CSS。

<强> See this demo here

在鼠标上用jQuery从左到右的背景位置输入幻灯片

2 个答案: