如何让:hover伪类继承原类样式？动态取消hover样式方案咨询

Awesome question—hardcoding color values is never ideal, especially when dealing with third-party libraries that might update later. Here are a few clean, dynamic solutions to keep the original .listItem border color on hover without repeating the green value:

1. Use CSS Variables (Recommended) #

This is the most flexible approach, as it creates a reusable reference for the initial border color. You can either override the base .listItem style to define the variable, or add it via your custom styles if you can't modify the third-party code:

/* Your custom styles */
.listItem {
  --initial-border-color: green; /* Match the third-party library's base color */
  border-color: var(--initial-border-color); /* Optional, to enforce the variable as the base value */
}

/* Override the hover state */
.listItem:hover {
  border-color: var(--initial-border-color);
}

If the third-party library ever updates the base border color, you only need to change the --initial-border-color value once, instead of hunting down every instance of the hardcoded color.

2. Use revert to Reset to Base Style #

The revert keyword resets the property to its value before any custom styles were applied—meaning it will fall back directly to the third-party library's original .listItem border color:

.listItem:hover {
  border-color: revert;
}

This is the simplest solution if you don't need to support very old browsers (it works in all modern browsers). It avoids variables entirely and just tells the browser to ignore the hover color override.

3. Use inherit (If Color Comes From Parent) #

If the .listItem's border color is inherited from its parent element, you can simply inherit that value back on hover:

.listItem:hover {
  border-color: inherit;
}

Note: This only works if the parent element defines the border color—it won't help if the .listItem has its own direct border color set (like in your example).

内容的提问来源于stack exchange，提问作者kelseyelayne