将按钮转换为悬停转换

Question

我在网上遇到了以下代码，找到了一个很好的按钮，点击后似乎按下了。

我想在悬停时按下按钮时添加一个过渡，而不是点击。

我该怎么做？

/**
 * AddToCalendar Icon Style
 * http://addtocalendar.com
 */

/* Base */

.addtocalendar var{
    display: none;
}

.addtocalendar {
    position: relative;
    display: inline-block;
    background: transparent!important;
}

.atcb-link {
    display: block;
    outline: none!important;
    cursor: pointer;
}

.atcb-link:focus~ul,
.atcb-link:active~ul,
.atcb-list:hover{
    visibility:visible;
}

.atcb-list {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    width: 170px;
    z-index: 900;
}

.atcb-list,
.atcb-item
{
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
}

.atcb-item {
    float: none;
    text-align: left;
}

.atcb-item-link
{
    text-decoration: none;
    outline: none;
    display: block;
}

.atcb-item.hover,
.atcb-item:hover {
    position: relative;
    z-index: 900;
    cursor: pointer;
    text-decoration: none;
    outline: none;
}


/* Orange */

.atc-style-glow-orange .atcb-list{
    margin: 10px 0px 0px 0px;
    padding: 0;
    color: #fff;
    line-height: 1.3em;
    vertical-align: middle;
    zoom: 1;
    border-radius: 4px;
}

.atc-style-glow-orange .atcb-link
{
    position: relative;
    color: rgba(255,255,255,1);
    text-decoration: none;
    background-color: rgba(219,87,5,1);
    font-size: 1em;
    display: block;
    padding: 4px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 12px rgba(0,0,0,.7);
    -moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 12px rgba(0,0,0,.7);
    box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 12px rgba(0,0,0,.7);
    text-align: center;
    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    -ms-transition: all .1s ease;
    -o-transition: all .1s ease;
    transition: all .1s ease;
}

.atc-style-glow-orange .atcb-link:active {
    -webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    -moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    position: relative;
    top: 6px;
}

.atc-style-glow-orange .atcb-link,
.atc-style-glow-orange .atcb-link:hover,
.atc-style-glow-orange .atcb-link:active,
.atc-style-glow-orange .atcb-link:focus
{
    color: #fff;
    font-family: "Verdana";
    font-size: 14px;
    text-decoration: none;
    outline: none;
    padding: 7px 25px;
}

.atc-style-glow-orange .atcb-list {
    width: 170px;
    border: 1px solid #fff;
    border: 1px solid rgb(186,186,186);
    border-radius: 2px;
    box-shadow: 0 0 5px #AAA;
}

.atc-style-glow-orange .atcb-list,
.atc-style-glow-orange .atcb-item
{
    background: #fff;
    color: #000;

}

.atc-style-glow-orange .atcb-item,
.atc-style-glow-orange .atcb-item-link
{
    line-height: 1.3em;
    vertical-align: middle;
    zoom: 1;
}

.atc-style-glow-orange .atcb-item-link,
.atc-style-glow-orange .atcb-item-link:hover,
.atc-style-glow-orange .atcb-item-link:active,
.atc-style-glow-orange .atcb-item-link:focus
{
    color: #000;
    font-family: "Verdana";
    font-size: 14px;
    text-decoration: none;
    outline: none;
    padding: 5px 15px;
}

.atc-style-glow-orange .atcb-item-link:hover,
.atc-style-glow-orange .atcb-item-link:active,
.atc-style-glow-orange .atcb-item-link:focus
{
    color: #fff;
    background: rgba(219,87,5,1);
}

.atc-style-glow-orange .atcb-item.hover,
.atc-style-glow-orange .atcb-item:hover {
    background: rgba(250,203,175,1);
}

            <span class="addtocalendar atc-style-glow-orange" id="atc_btn_orange" data-on-button-click="atcButtonClick" data-on-calendar-click="atcCalendarClick">
                <a class="atcb-link">Add to Calendar</a>
            </span>
        </div>

Answer 1

将鼠标悬停在您需要的课程上，

.classname:hover{
   background-color:#FF0000;
}

Answer 2

改变这个：

str

到此：

final

Here is the JSFiddle demo