Javascript 同时更改鼠标悬停时的按钮背景图像、文本和形状

我想知道是否有可能使一个按钮的背景图像或文本更改为另一个文本或图像连同鼠标悬停的按钮形状

假设我有一个按钮，上面有特定的文本或背景图像，推着符号✓ 选中标记，我希望它将形状从圆形更改为矩形，文本从选中标记更改为鼠标悬停时提交

是否可以在不更改动画的情况下使用CSS、JS或两者都使用？

如果您只想更改背景图像和形状，可以使用纯CSS

.button {
    height:30px;
    width:60px;
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    border-radius:15px;
    background-image:url(...)
}
.button:hover {
    -webkit-border-radius:0px;
    -moz-border-radius:0px;
    border-radius:0px;
    background-image:url(...)
}

如果要更改文本，则需要JavaScript

<style>
    #button {
        height:30px;
        width:60px;
        border-radius:15px;
        background-image:url(img1.png);
    }
</style>
<script>
    function mouseOver() {
        document.getElementById("button").style.backgroundImage = "url(img2.png)";
        document.getElementById("button").style.borderRadius = "0px";
        document.getElementById("button").innerHTML = "Submit";
    }

    function mouseOut() {
        document.getElementById("button").style.backgroundImage = "url(img1.png)";
        document.getElementById("button").style.borderRadius = "15px";
        document.getElementById("button").innerHTML = "✓";
    }
</script>

<div id="button" onmouseover="mouseOver()" onmouseout="mouseOut()">✓</div>

功能。在：hover css中更改的每个属性都会自动设置动画，持续时间为0.2秒。 如果您还希望在我的示例中更改文本，则淡入淡出会变得更复杂一些。免责声明：我的解决方案可能不是最优雅的，但它是有效的

在CSS中再添加两个类，.fade out和.fade in

在本例中，我希望文本动画比边框动画长一点，我认为它看起来更好，但如果它们的长度相同，则必须将每个动画设置为0.1s

然后添加两个@keyframes动画，淡出和淡出，如下所示：

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

现在是棘手的部分，JavaScript：

function mouseIsOver() {  
    btn = document.getElementById("button_java");
    btn.childNodes[0].className += ' fade-out';
    setTimeout(function(){
        btn.childNodes[0].innerHTML = "Submit";
        btn.childNodes[0].className = btn.childNodes[0].className.replace(' fade-out', '');
        btn.childNodes[0].className += ' fade-in';
        setTimeout(function(){
            btn.childNodes[0].className = btn.childNodes[0].className.replace(' fade-in', '');
        }, 200);
    }, 200);
}

function mouseIsOut() {
    btn = document.getElementById("button_java");
    btn.childNodes[0].className += ' fade-out';
    setTimeout(function(){
        btn.childNodes[0].innerHTML = "✓";
        btn.childNodes[0].className = btn.childNodes[0].className.replace(' fade-out', '');
        btn.childNodes[0].className += ' fade-in';
        setTimeout(function(){
            btn.childNodes[0].className = btn.childNodes[0].className.replace(' fade-in', '');
        }, 200);
    }, 200);
}

childNodes[0]获取所有内部子标记，并选择第一个标记 className+=“淡出”将类“淡出”添加到元素类列表中。添加的类名前面需要有一个空格，这样如果已经定义了类，它们就不会合并成一个不存在的类 setTimeoutfunction，waitduration在waitet waitduration毫秒后运行函数中的代码。将此长度与CSS文件中.fade out{…}类中动画的持续时间相匹配 替换“淡出”，用空字符串替换类元素列表中的淡出类以将其删除。别忘了把空间也移走。 您的个性化按钮 或 我已经从您的页面复制了代码，在按钮中的文本周围添加了一个换行符，并添加了

.button p {
    line-height:1em;
    margin:0;
}

到CSS。 然后需要通过添加

<script src="http://code.jquery.com/jquery-2.1.3.js"></script>

打在头上。然后添加另一个代码段

<script type="text/javascript">
$( document ).ready(function() {
    $("#subscribe_button").hover(
                function() {
                txt = $("#subscribe_button").children("p");
                txt.fadeOut(100, function() {
                        txt.html("Sottoscrivi");
                        txt.fadeIn();
                });
          }, function() {
                txt = $("#subscribe_button").children("p");
                txt.stop(true,false).fadeOut(100, function() {
                        txt.html("✓");
                        txt.fadeIn();
                });
          }
        );
});
</script>

---

应该是这样

是的，CSS和JS都可以单独使用，也可以同时使用。太棒了！让变化变得不那么突然，例如CSS转换，因此有一个给定的时间，而不是那么快，怎么样？非常感谢！你给我留下了一个难题。所有这些都超出了我的能力范围，但我会仔细分析。这是一个明显不完整的按钮版本，只是为了让你了解动画应该是怎样的——按钮应该是圆形的，带有复选标记符号/图像，然后在鼠标悬停时拉长，以适应书写。如果你觉得写得舒服，即使是文字发生变化的部分，你也会非常感激。那么，在标题为Sottoscrivi的新闻稿部分的绿色按钮上，你想在圆形按钮上显示一个复选标记，当它们悬停在按钮上方时，按钮变宽，文字变为Sottoscrivi？这是正确的，还是您的网页上还有我不知道的另一个按钮？另外，您愿意添加jQuery库吗？因为这会让它变得简单很多。我没有等你的答案，只是使用了jQuery，所以请查看上面编辑的答案以获取代码！如果这有帮助的话，如果你能通过点击旁边的复选标记来接受我的答案，我将不胜感激。

<script src="http://code.jquery.com/jquery-2.1.3.js"></script>

<script type="text/javascript">
$( document ).ready(function() {
    $("#subscribe_button").hover(
                function() {
                txt = $("#subscribe_button").children("p");
                txt.fadeOut(100, function() {
                        txt.html("Sottoscrivi");
                        txt.fadeIn();
                });
          }, function() {
                txt = $("#subscribe_button").children("p");
                txt.stop(true,false).fadeOut(100, function() {
                        txt.html("✓");
                        txt.fadeIn();
                });
          }
        );
});
</script>