Question

我想将a:active伪类添加到应用于四个不同对象（模糊）的.blurb_underline类。基本上，我希望在单击其中一个blurb之后使下划线保持不变（也希望其中一个在页面加载时处于活动状态）。

.blurb_underline h4 {
  display: inline-block;
  position: relative;
  padding-bottom: 8px;
  font-size: 20px;
  font-weight: 400;
  -webkit-transition: all .5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.blurb_underline p {
  padding-top: 10px;
}

.blurb_underline h4:hover {
  color: #e02b20;
}

.blurb_underline h4:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  transition: width 0s ease, background .5s ease;
}

.blurb_underline h4:after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: #e02b20;
  transition: width .5s ease;
}

.blurb_underline h4:hover:before {
  width: 100%;
  background: #e02b20;
  transition: width .5s ease;
}

.blurb_underline h4:hover:after {
  width: 100%;
  background: transparent;
  transition: all 0s ease;
}

谢谢你：）

以下是该部分的图片： https://imgur.com/a/dziJwBM

Answer 1

当用户当前单击元素时，将使用:active伪选择器。那不是您要使用的。

如果您希望“在单击其中一个对象之间”后保持样式，则最简单的方法是通过使用JavaScript中的事件在单击时添加另一个类。

这是一个有效的代码段：

// Get all blurbs elements
var blurbs = document.getElementsByClassName("blurb_underline");

// Function to remove the “active” class from all blurbs
function blurbsDeactivate() {
  [].forEach.call(blurbs, function(blurb) {
    blurb.classList.remove("active");
  });
}

// Do the following for each blurb
[].forEach.call(blurbs, function(blurb) {
  // Do the following on click on any blurb
  blurb.addEventListener('click', function(event) {
    blurbsDeactivate(); // Launch function to remove “active” on all blurbs
    this.classList.add("active"); // Add the “active” class on the one just clicked
  });
});

.blurb_underline h4 {
  display: inline-block;
  position: relative;
  padding-bottom: 8px;
  font-size: 20px;
  font-weight: 400;
  -webkit-transition: all .5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.blurb_underline p {
  padding-top: 10px;
}

.blurb_underline h4:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  transition: width 0s ease, background .5s ease;
}

.blurb_underline h4:after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: #e02b20;
  transition: width .5s ease;
}

.blurb_underline h4:hover,
.blurb_underline.active h4 { /* Added this line */
  color: #e02b20;
}

.blurb_underline h4:hover:before,
.blurb_underline.active h4:before { /* Added this line */
  width: 100%;
  background: #e02b20;
  transition: width .5s ease;
}

.blurb_underline h4:hover:after,
.blurb_underline.active h4:after { /* Added this line */
  width: 100%;
  background: transparent;
  transition: all 0s ease;
}

/* Added to enhance snippet */
.blurb_underline {
  display: inline-block;
  margin: 0 8px;
}

<div class="blurb_underline active"><!-- Start as active -->
  <h4>Blurb1 h4</h4>
  <p>Blurb1 p</p>
</div>
<div class="blurb_underline">
  <h4>Blurb2 h4</h4>
  <p>Blurb2 p</p>
</div>
<div class="blurb_underline">
  <h4>Blurb3 h4</h4>
  <p>Blurb3 p</p>
</div>
<div class="blurb_underline">
  <h4>Blurb4 h4</h4>
  <p>Blurb4 p</p>
</div>

如何将a：active伪类应用于我的CSS代码？

1 个答案: