Question

如何为单个按钮执行两种效果。你可以从下面的链接中找到例子。

我只想在悬停时更改图标信封效果＆＃34;然后点击＆＃34;

悬停图标应更改其效果，您可以在页面底部看到绿色的效果。
点击相同的按钮图标时，应改变其效果，如推车移动的按钮。

jsfiddler将非常感激。

感谢提醒

Answer 1

您可以使用此代码

$("button").mousedown(function(){
    $(this).css("background-color", "#B8A3C1");
});
$(document).mouseup(function(){
    $("button").css("background-color", "#823aa0");
});

button {
    width: 250px;
    height: 70px;
    position: relative;
    background: #823aa0;
    border: none;   
    color: #fff;
    overflow: hidden;
    transition: all 1s; 
    outline: none;
}

button:before,
button:after {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    transition: all 0.3s;
    line-height: 65px;
}

button:before {
    content: "\2663";     
    top: -70px;
    font-size: 50px;  
}

button:hover:before { top: 0px; }

button:after {
    content: "Click";
    top: 0px;
    font-size: 30px;  
}

button:hover:after { top: 70px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button></button>

按钮 - 带有悬停的单个按钮，带图标的单击效果

1 个答案: