Question

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

说我有一个按钮，有一个特定的文字或背景图像推动符号✓（复选标记），我希望它改变形状（从圆形到矩形）和文本（从复选标记到单词 submit < / em>）鼠标悬停。

是否可以使用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 。

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

在这种情况下，我希望文本动画比边框动画稍长一点（我觉得它看起来更好），但如果它们的长度相同，则必须将每个动画设置为0.1小号

然后添加两个 @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] 获取所有内部子项（标记），并选择第一个
className + =＆＃39;淡出＆＃39; 增加了课程＆＃39; 淡出＆＃39;到元素类列表。在添加的类名前面需要有一个空格，就这样如果已经定义了类，它们就不会组合成一个不存在的类
setTimeout（ function ， waitduration ）在waitet waitduration <之后运行 function 中的代码/ em>毫秒。将此长度与CSS文件中的.fade-out{...}类

中的动画持续时间相匹配
className.replace（＆＃39;淡出＆＃39;，＆＃39;＆＃39;）替换元素中的淡出类带有空字符串的类列表以将其删除。不要忘记删除空间。

您的个性化按钮

JSFiddle或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>

那应该是它！

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

1 个答案:

不改变动画

改变动画

您的个性化按钮