Html CSS转换后单击

我的问题很简单，但我不知道它来自哪里

我有一个钮扣。当我点击它时，它会向左滑动，另一个按钮取代它，并带有CSS动画。
这是我的密码：

。表单动画右键单击{
位置：相对位置；
溢出：隐藏；
}
.窗体动画右键单击>.窗体组{
宽度：200%；
}
.form动画右键单击>.form group>.btn{
宽度：50%；
显示：内联块；
浮动：左；
-o型过渡：变换0.3s缓变；
-webkit过渡：转换0.3s缓解；
过渡：0.3s的过渡；
}
.form动画右键单击>.form group>.btn:焦点{
-o变换：平移（-100%，0）；
-webkit转换：转换（-100%，0）；
-ms变换：平移（-100%，0）；
转换：转换（-100%，0）；
}
.form动画右键单击>.form group>.btn:focus+.form幻灯片{
-o变换：平移（-100%，0）；
-webkit转换：转换（-100%，0）；
-ms变换：平移（-100%，0）；
转换：转换（-100%，0）；
}
.窗体动画右键单击.窗体幻灯片{
宽度：50%；
显示：内联块；
浮动：左；
-o型过渡：变换0.3s缓变；
-webkit过渡：转换0.3s缓解；
过渡：0.3s的过渡；
}
.窗体动画右键单击.窗体幻灯片>.row{
左边距：0；
右边距：0；
填充：0.4px；
}
.窗体动画右键单击。窗体幻灯片>.row>div{
显示：内联块；
}
.窗体动画右键单击。窗体幻灯片>.row>[class^=“col-”]{
填充：0 2.666667px；
}
.窗体动画右键单击.窗体幻灯片>.行标签{
页边距底部：0；
线高：1.6em；
字体系列：“SourceSansPro”、Helvetica、Arial、无衬线字体；
颜色：#01273c；
}
.窗体动画右键单击.窗体幻灯片>.row.btn xs{
左侧填充：4px；
右侧填充：4px；
z指数：10000；
}

删除
对
不
正文

如果您可以并且希望使用纯CSS解决方案“生存”，请看这里。（我在回答的最后附上了一个小提琴的例子）

首先，在

div

中创建自己的“alert”元素。像这样-

<div id="alert">
    <h3>Alert-Title</h3>
    <div class="content">
        This is the alert-content
    </div>
    <a href="#" id="close-alert">Close</a>
</div>

操作问题：

是否可以通过纯css实现我的愿望状态

回答：不，不是。

问题:

有哪些替代方法

答：可以通过javascript、jQuery等实现

jQuery解决方案：

$（'.delete'）。单击(
函数（）{
$（此）.addClass（“活动”）；
});
$（'.form幻灯片按钮'）。单击(
函数（）{
$（'.delete'）.removeClass（“活动”）；
警报（$（this.text（））；
});
。表单动画右键单击{
位置：相对位置；
溢出：隐藏；
}
.窗体动画右键单击>.窗体组{
宽度：200%；
}
.form动画右键单击>.form group>.btn{
宽度：50%；
显示：内联块；
浮动：左；
-o型过渡：变换0.3s缓变；
-webkit过渡：转换0.3s缓解；
过渡：0.3s的过渡；
}
.form anim右键单击>.form group>.btn.active{
-o变换：平移（-100%，0）；
-webkit转换：转换（-100%，0）；
-ms变换：平移（-100%，0）；
转换：转换（-100%，0）；
}
.form动画右键单击>.form group>.btn.active+.form幻灯片{
-o变换：平移（-100%，0）；
-webkit转换：转换（-100%，0）；
-ms变换：平移（-100%，0）；
转换：转换（-100%，0）；
}
.窗体动画右键单击.窗体幻灯片{
宽度：50%；
显示：内联块；
浮动：左；
-o型过渡：变换0.3s缓变；
-webkit过渡：转换0.3s缓解；
过渡：0.3s的过渡；
}
.窗体动画右键单击.窗体幻灯片>.row{
左边距：0；
右边距：0；
填充：0.4px；
}
.窗体动画右键单击。窗体幻灯片>.row>div{
显示：内联块；
}
.窗体动画右键单击。窗体幻灯片>.row>[class^=“col-”]{
填充：0 2.666667px；
}
.窗体动画右键单击.窗体幻灯片>.行标签{
页边距底部：0；
线高：1.6em；
字体系列：“SourceSansPro”、Helvetica、Arial、无衬线字体；
颜色：#01273c；
}
.窗体动画右键单击.窗体幻灯片>.row.btn xs{
左侧填充：4px；
右侧填充：4px；
z指数：10000；
}

删除
对
不
正文
好的，我的理解是，因为您正在使用焦点，所以在它注册单击之前，焦点已丢失。所以这里有一个解决方案，我接受了@alireza safian的答案并取出JQuery


var formSlide=document.querySelectorAll（'.form slide button'），
formCount；
document.querySelector（'.delete'）。onclick=function（）{
document.querySelector（'.delete'）.classList.add（“active”）；
};
for（formCount=0；formCount

。表单动画右键单击{
位置：相对位置；
溢出：隐藏；
}
.窗体动画右键单击>.窗体组{
宽度：200%；
}
.form动画右键单击>.form group>.btn{
宽度：50%；
显示：内联块；
浮动：左；
-o型过渡：变换0.3s缓变；
-webkit过渡：转换0.3s缓解；
过渡：0.3s的过渡；
}
.form anim右键单击>.form group>.btn.active{
-o变换：平移（-100%，0）；
-webkit转换：转换（-100%，0）；
-ms变换：平移（-100%，0）；
转换：转换（-100%，0）；
}
.form动画右键单击>.form group>.btn.active+.form幻灯片{
-o变换：平移（-100%，0）；
-webkit转换：转换（-100%，0）；
-ms变换：平移（-100%，0）；
转换：转换（-100%，0）；
}
.
div#alert{
    width: 350px;
    height: auto;
    min-height: 200px;
    background: #CCC;
    border-radius: 4px;
    padding: 10px 15px;
    display: none; /* hide the alert by default */
    margin: 0 auto;
    position: relative;
}
div#alert:target{
    display: block; /* this line changes the 'display: none' to 'display: block' */
}
div#alert h3{
    text-align: center;
}
div#alert > a#close-alert{
    position: absolute;
    right: 10px;
    bottom: 15px;
    background: #FFF;
    border: 1px solid #DDD;
    border-radius: 4px;
    padding: 15px;
    text-decoration: none;
}