在悬停时同时更改按钮背景图像、文本和形状

Question

我想知道是否可以在鼠标悬停时将按钮背景图像或文本更改为另一个文本或图像以及按钮形状？

假设我有一个带有特定文本或背景图像的按钮，用于推动符号 ✓（复选标记）并且我希望它改变形状（从圆形到矩形）和文本（从复选标记到单词 在鼠标悬停时提交)。

是否可以使用 CSS、JS 或两者？

Answer 1

不改变动画

如果只是想改变背景图片和形状，可以使用纯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>

随着动画的变化

JSFiddle
要为按钮设置动画，请使用

-webkit-transition:all 0.2s;
transition:all 0.2s;

函数。在 :hover css 中更改的每个属性都会自动动画，持续时间为 0.2 秒。
如果您还希望文本发生变化（在我的示例中淡入和淡出），它会变得有点复杂。（免责声明：我的解决方案可能不是最优雅的解决方案，但它确实有效。）

在你的 CSS、.fade-out 和 .fade-in[=83= 中再添加两个 classes ].

.fade-out { opacity: 1; animation: fadeOut 0.2s; } .fade-in { opacity: 0; animation: fadeIn 0.2s; }

在这种情况下，我希望文本动画比边框动画长一点（我认为这样看起来更好），但如果它们应该相同长度，则必须分别设置动画到 0.1s

然后添加两个@keyframes动画，fadeOut和fadeIn像这样：

@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]获取所有inner children（tags），选择第一个

className += 'fade-out' 添加 class 'fade-out'到元素 class 列表。添加的class名称前面需要有一个space，这样如果已经定义了class，它们就不会合并成一个不存在的 class

setTimeout(function,waitduration)运行中的代码function 在等待 waitduration 毫秒之后。将此长度与 CSS-文件
中 .fade-out{...} class 中的动画持续时间相匹配
className.replace('淡出','') 替换淡出 class在 classes 的元素列表中用空字符串将其删除。不要忘记也删除 space。

您的个性化按钮

JSFiddle or PasteBin
我已经从您的页面复制了代码，在按钮中的文本周围添加了 <p> 环绕，并添加了

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

到CSS。然后你需要通过添加
来导入 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>

应该就是了！

在悬停时同时更改按钮背景图像、文本和形状

Change button background image, text and shape on hover at the same time

javascript

css

jquery

button

不改变动画

随着动画的变化

您的个性化按钮