Переопределить стили наведения в элементе наведения - PullRequest
Новая
       7

Переопределить стили наведения в элементе наведения

1 голос
/ 13 декабря 2011

У меня есть класс 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

Ответы [ 2 ]

2 голосов
/ 13 декабря 2011

Перезаписать значение преобразования текста для элементов, которые НЕ хотите, чтобы при наведении курсора они были прописными.

С помощью 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>");
});
0 голосов
/ 13 декабря 2011

В ответ на ваш последний комментарий к вашему вопросу: да, если вы можете использовать некоторые зарезервированные символы, вы можете достичь этого без особых проблем:

http://jsfiddle.net/LH7sy/8

<a class="uppercase" href="#">everything uppercase, except (this) word</a>


$(document).ready(function () {
     $('.uppercase').each(function() {
        var end = false;
        var s = $(this).html();
        while(end == false) {
            var p1 = s.indexOf('(');
            var p2 = s.indexOf(')');
            if (p1 != -1) { /* if '(' is found in the string */
                var result = s.substring(0,p1);
                result += '<span style="text-transform:none">';
                result += s.substring(p1+1,p2);
                result += '</span>'                        
                result += s.substr(p2+1);
                s = result;
            } else {
                end = true;
            }
        }
        $(this).html(result);
    })
})
...