javascript - 在悬停元素中覆盖悬停样式

Question

我有一个 CSS 类

.uppercase:hover { text-transform: uppercase; }

因此，每当我使用它时，文本都会发生变化，但在少数情况下，我希望其中的某些文本不要大写。 (取消 .uppercase:hover)。例如:

Abc cake smurf cafe Zzz -> ABC CAKE smurf CAFE ZZZ

我想使用 JavaScript 而不是 CSS 来做到这一点。

更新:

Abc cake (smurf) cafe Zzz -> ABC CAKE smurf CAFE ZZZ

Answer 1

为您不想在悬停时变为大写的元素覆盖文本转换值。

使用 jQuery:

$(".uppercase").each(function(){
    // wrap case-insensitive occurrences of the words smurf, blue, and stuff
    // with a span that cancels the affect of the inherited text-transform property
    // from its ancestor's `uppercase` class.
    this.innerHTML = this.innerHTML.replace(/(smurf|blue|stuff)/ig, "<span style='text-transform:none;'>$1</span>");
});