单击

时间:2018-12-16 16:56:45

标签: html css css-selectors

我目前正在练习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>

2 个答案:

答案 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>