Подчеркивание в Javascript?

После осознания того, что у вас не может быть встроенного псевдокласса -- Как написать :hover во встроенном CSS? -- Я подумал о том, чтобы Javascript выполнял ту же работу с событиями onMouseOver и onMouseOut для имитации псевдокласса :hover. Я пытаюсь удалить подчеркивание из текста, когда мышь находится над ним. Есть ли фрагмент Javascript, который кто-то может предложить, который может это сделать?

Я пробовал onMouseOver="this.style.textDecoration="none"", но мне кажется, что контрастные цитаты все портят.

Есть идеи?

Примечание: к сожалению, этот эффект должен быть достигнут без использования внешней или внутренней таблицы стилей (только встроенные).


javascript css pseudo-class
person Code Monkey    schedule 28.10.2012    source источник
comment
Вы уверены, что не можете использовать элемент style? Люди часто предполагают это, потому что они не могут повлиять на элемент head. Но style на самом деле работает и внутри body (хотя формальный синтаксис HTML это запрещает).   -  person Jukka K. Korpela    schedule 28.10.2012

Ответы (3)


arrow_upward
7
arrow_downward

вы можете сделать это по

 onMouseOver="this.style.textDecoration='none';"
person NullPoiиteя    schedule 28.10.2012
comment
Это работает, но я также обнаружил, что точка с запятой не нужна. Это просто хорошая привычка кодирования? - person Code Monkey; 28.10.2012
comment
Это хорошая привычка кодирования, но для одного оператора она не нужна. Также вы можете сделать onMouseOver='this.style.textDecoration="none";' (обратные кавычки), если хотите. - person vol7ron; 28.10.2012
comment
Javascript работает без точек с запятой в конце операторов. Но использование одного для явного обозначения конца операторов всегда является хорошей практикой. - person techfoobar; 28.10.2012
comment
@CodeMonkey, вы должны использовать точку с запятой, это хорошая привычка кодирования. - person StaticVariable; 28.10.2012
comment
@CodeMonkey, я уверен, что вы прочитали совет vol7ron и techfoobar - person NullPoiиteя; 28.10.2012
comment
@vol7ron Вы даже можете сделать onMouseOver="this.style.textDecoration="none";", но это просто становится глупо. На самом деле идеальным было бы альтернативное решение, желательно с использованием традиционного CSS. - person Niet the Dark Absol; 26.09.2013

arrow_upward
4
arrow_downward

Вот ваш ответ:

<a onmouseover="this.style.textDecoration='none';"  onmouseout="this.style.textDecoration='underline';">hover me</a>


если бы вы могли использовать jQuery, было бы проще. Просто напишите один раз следующий код. Тогда вам не нужно менять разметку.

<script type="text/javascript">
(function($) {
    $( function() {
        $('a').hover(
            function() {
                $(this).css('text-decoration','none');
            },
            function() {
                $(this).css('text-decoration','underline');
            }
        )
    } );
} (jQuery));
</script>
person bukart    schedule 28.10.2012

arrow_upward
1
arrow_downward

Я думаю, вам не следует использовать javascript, но CSS:

.underlineHover:hover {
    text-decoration: underline;
}

<span class="underlineHover">Content</span>

Примечание. Я использовал класс underlineHover, но имейте в виду, что классы должны иметь семантическое значение, а не стиль.

person Oriol    schedule 25.09.2013