悬停时更改按钮的背景？答案

【问题标题】：Change background of a button when I hover it?悬停时更改按钮的背景？
【发布时间】：2016-08-13 15:50:07
【问题描述】：

如何在鼠标悬停时更改按钮的背景图片？也许让图像从左到右淡化？这“可行”吗？

【问题讨论】：

【解决方案1】：

关于你的初始按钮样式你有 {background:url('image1.jpeg');宽度：100%；}。然后创建另一种名为 #button:hover {background:url('image2.jpeg);} 的样式你的“也许”效果可以通过添加过渡到你的风格来实现#button

【讨论】：

【解决方案2】：

尝试使用线性渐变（也许您可以使用图像！（或不））

  
    #btn{
            width:20%;
            border: solid 1px rgba(171, 156, 156, 0.56);
            border-radius:15px;
            background: linear-gradient(to right, #2ede13 50%,#7ed755 50%);
            background-size: 200% 100%;
            background-position: right bottom;
            transition-property: all;
            transition: 1s;
        }
    
            #btn:hover {
                background-position: left bottom;
                color: black;
            }

 &lt;button id="btn"&gt;Search&lt;/button&gt;

【讨论】：

也许这有助于stackoverflow.com/questions/2504071/…

【解决方案3】：

这个答案很好地解决了它，不确定从左到右的淡入，但我敢肯定有可能我只是不太了解css

How can I change a button's color on hover?

你想要背景变量。

【讨论】：

【解决方案4】：

示例代码快照：

<button id="buttonID">Search</button>

<style>
#buttonID:hover
{
    background-color: black;
    color: white;
}
enter code here
</style>

只需给出一个 ID 或类，并在样式表中 #elementID:hover 按钮的名称。

【讨论】：