在html / css中触发oncilck事件时按钮的意外行为

Question

在下面的代码中，我将按钮旋转到90度并固定位置。 即使点击后，我也需要将此按钮固定在该位置。 点击按钮后，位置变为实际位置（0度）。

按钮的放大和缩小效果在点击时也无效。

我附上了一张图片，以便更好地了解问题行为。

#action_btn
{
position:absolute;
width:81px;
height:20px;
background-image:url(image/action_btn.png);
margin-top:82px;
margin-left:30px;
-ms-transform: rotate(90deg); /* IE 9 */
   -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);

}

#action_btn input
{
    width:81px;
    height:20px;
    opacity:0.0;

}

#action_btn :active{

-webkit-transform: scale(0.95,0.95);
-moz-transform:scale(0.95,0.95);    

}

欢迎任何帮助或建议。

Answer 1

Do you mean something like this?

我只是创建了一个名为active的类，并在使用jQuery单击时添加到该div。下面是代码：

$(document).ready(function() {
    $('#action_btn').click(function() {
        $(this).addClass('active');
    });
});

对于CSS：

#action_btn.active {
    -webkit-transform: scale(0.95, 0.95);
    -moz-transform:scale(0.95, 0.95);
}

编辑：如果您想要切换课程，请使用this fiddle。

当您单击红色框时，它只会激活和停用该类。