我目前正在练习HTML和CSS,并使用PSD模板制作网页,到目前为止一切都很好,但是我面临以下问题:
问题是单击边框后边框消失了,:focus
似乎无法解决问题。在单击另一个元素之前,我需要显示边框,可以使用CSS完成吗?如果是(这可能就是答案),那又如何?如果它具有JS解决方案,那么很高兴您能提供帮助。
.icons_and_text {
padding: 0 50px;
display: flex;
justify-content: space-between;
text-align: center;
font-size: 27px;
font-family: Segoe WPN;
color: #727171;
}
.icon {
padding: 26px 52px 52px 52px;
z-index: 2
}
.icon:hover {
cursor: pointer;
}
.icon:active {
border: 3px solid #dedede;
border-bottom: white;
}
.icon:focus {
border: 3px solid #dedede;
border-bottom: white;
}
<div class="icons_and_text">
<div class="icon">
<img src="Images/phone_img.png">
<p>Responsive</p>
<p>Websites</p>
</div>
</div>
答案 0 :(得分:1)
div:focus
默认情况下不起作用,除非div具有tabindex
属性。
tabindex属性指定元素的选项卡顺序(使用“ tab”按钮进行导航时)。
来自W3Schools。
它还为元素启用了聚焦功能,因此,如果您希望div具有聚焦功能,只需添加以下属性:tabindex="0"
。
.icons_and_text {
padding: 0 50px;
display: flex;
justify-content: space-between;
text-align: center;
font-size: 27px;
font-family: Segoe WPN;
color: #727171;
}
.icon {
padding: 26px 52px 52px 52px;
z-index: 2
}
.icon:hover {
cursor: pointer;
}
.icon:active {
border: 3px solid #dedede;
border-bottom: white;
}
.icon:focus {
border: 3px solid #dedede;
border-bottom: white;
}
<div class="icons_and_text">
<div class="icon" tabindex="0">
<img src="https://via.placeholder.com/150">
<p>Responsive
<p>Websites</p>
</p>
</div>
</div>
它还会在聚焦时添加轮廓,您可以使用outline: 0;
禁用该轮廓。
答案 1 :(得分:0)
我是用jquery做的。
$(document).ready(function(){
$('.icons_and_text').click(function(){
$('.icon').toggleClass("new");
})
});
.icons_and_text{
padding: 0 50px;
display: flex;
justify-content: space-between;
text-align: center;
font-size: 27px;
font-family: Segoe WPN;
color: #727171;
}
.icon{
padding: 26px 52px 52px 52px;
z-index: 2
}
.icon:hover{
cursor: pointer;
}
.icon:active{
border: 3px solid #dedede;
border-bottom: white;
}
.icon:focus{
border: 3px solid #dedede;
border-bottom: white;
}
.new{
border: 3px solid #dedede;
border-bottom: white;
}
<div class="icons_and_text">
<div class="icon">
<img src="https://picsum.photos/500/200">
<p>Responsive <p>Websites</p></p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>