html – 当我点击屏幕上的其他位置时,按钮的下边框消失
发布时间:2020-12-14 18:45:33 所属栏目:资源 来源:网络整理
导读:fiddle 这是我的HTML代码: link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"button i class="fa fa-5x fa-motorcycle gobumpr_icon"/i/buttonbutton i class="fa fa-car fa-5x gobumpr_icon"/i/
fiddle
这是我的HTML代码: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <button> <i class="fa fa-5x fa-motorcycle gobumpr_icon"></i> </button> <button> <i class="fa fa-car fa-5x gobumpr_icon"></i> </button> 这是我的CSS: button:focus { border-bottom: thick solid #FFA800; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; transition: width 2s; -webkit-transition: width 2s; outline: none; box-shadow: none; } 我希望边框底部保持不变,直到单击另一个按钮. 解决方法
:焦点不会有帮助,因为只要你点击外面边框就会删除.为此,您需要在单击按钮时添加一个类,除非单击同一页面中的其他按钮.
$(function() { var buttons = $('.button'); buttons.click(function(e) { e.preventDefault(); buttons.removeClass('focus'); $(this).addClass('focus'); }); }); .button.focus { border-bottom:thick solid #FFA800; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; transition: width 2s; -webkit-transition: width 2s; outline:none; box-shadow:none; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <button class="button"><i class="fa fa-5x fa-motorcycle gobumpr_icon"></i></button> <button class="button"><i class="fa fa-car fa-5x gobumpr_icon"></i></button> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |