CSS轮播按钮:active伪类背景色失效问题求助

Let's break down why your slider indicator's active state isn't showing up, and fix it with a reliable CSS solution.

The Root Cause #

Your .slider-change:active (and :focus) styles aren't working as expected because:

• When you click the anchor links (<a href="#slider-image-1">), the browser immediately jumps to the target anchor (<span id="slider-image-1">). This happens so fast that the :active state only lasts a fraction of a second—too quick to see.
• After the jump, the browser moves focus to the target span element, so the :focus state on the link also disappears right away.

The Solution: Use :target to Persist the Active State #

Instead of relying on :active or :focus, we can use the :target pseudo-class to style the active indicator. This pseudo-class stays applied to the target anchor until another anchor is clicked, so the active state will persist.

Here's how to adjust your code:

Step 1: Updated Full Code

We'll tweak the HTML structure slightly and add new CSS rules to make the active state stick:

<!doctype html>
<html>
<head>
<style>
.slider-holder { 
  width: 800px; 
  height: 400px; 
  background-color: yellow; 
  margin-left: auto; 
  margin-right: auto; 
  margin-top: 0px; 
  text-align: center; 
  overflow: hidden;
  position: relative; /* Added for positioning controls */
}
.image-holder { 
  width: 2400px; 
  background-color: red; 
  height: 400px; 
  clear: both; 
  position: relative; 
  -webkit-transition: left 2s; 
  -moz-transition: left 2s; 
  -o-transition: left 2s; 
  transition: left 2s; 
}
.slider-image { 
  float: left; 
  margin: 0px; 
  padding: 0px; 
  position: relative; 
}
#slider-image-1:target~.image-holder { left: 0px; }
#slider-image-2:target~.image-holder { left: -800px; }
#slider-image-3:target~.image-holder { left: -1600px; }
.slider-change { 
  display: inline-block; 
  height: 20px; 
  width: 30px; 
  background-color: #ddd; 
  margin: 10px; 
}
.slider-change:hover { background-color: black; }

/* New styles for persistent active state */
.slider-controls {
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
}
#slider-image-1:target ~ .slider-controls .slider-change[href="#slider-image-1"],
#slider-image-2:target ~ .slider-controls .slider-change[href="#slider-image-2"],
#slider-image-3:target ~ .slider-controls .slider-change[href="#slider-image-3"] {
  background-color: black;
}
</style>
</head>
<body>
<div class="slider-holder">
  <span id="slider-image-1"></span>
  <span id="slider-image-2"></span>
  <span id="slider-image-3"></span>
  <div class="image-holder">
    <img src="1.jpg" class="slider-image" />
    <img src="2.jpg" class="slider-image" />
    <img src="3.jpg" class="slider-image" />
  </div>
  <!-- Controls moved inside slider holder for sibling selector access -->
  <div class="slider-controls">
    <a href="#slider-image-1" class="slider-change"></a>
    <a href="#slider-image-2" class="slider-change"></a>
    <a href="#slider-image-3" class="slider-change"></a>
  </div>
</div>
</body>
</html>

Step 2: What Changed?

• We added a .slider-controls container inside .slider-holder and positioned it at the bottom of the slider (you can adjust the bottom value to move it up/down).
• We used the :target pseudo-class on the anchor spans (e.g., #slider-image-1:target) to select the corresponding indicator link via its href attribute. This ensures the active indicator stays black until another slide is selected.

Alternative (No HTML Structure Change) #

If you prefer to keep your original HTML layout, use the modern :has() pseudo-class (supported in all up-to-date browsers) to target the active indicator from the body:

body:has(#slider-image-1:target) .slider-change[href="#slider-image-1"],
body:has(#slider-image-2:target) .slider-change[href="#slider-image-2"],
body:has(#slider-image-3:target) .slider-change[href="#slider-image-3"] {
  background-color: black;
}

内容的提问来源于stack exchange，提问作者Carlos Web Soluções Web