Встроенный стиль для работы как: hover в CSS

97

Я знаю, что встраивание стилей CSS непосредственно в теги HTML, которые они затрагивают, в значительной степени противоречит целям CSS, но иногда это полезно для целей отладки, например:

<p style="font-size: 24px">asdf</p>

Какой синтаксис для встраивания правила вроде:

a:hover {text-decoration: underline;}

в атрибут стиля тега A? Очевидно, дело не в этом ...

<a href="foo" style="text-decoration: underline">bar</a>

... поскольку это будет применяться постоянно, а не только во время наведения.

html css ралди
источник
Теоретически, если вы пытаетесь сделать наведение что-то динамическое, вы можете использовать javascript для внедрения правила наведения в таблицу стилей, используя список существующих листов window.document.styleSheets.
GAgnew
См. Также stackoverflow.com/questions/5293280/…
rogerdpack 06

Ответы:

98

Боюсь, что это невозможно, селекторы псевдоклассов нельзя установить в строке, вам придется делать это на странице или в таблице стилей.

Я должен упомянуть, что технически вы должны иметь возможность делать это в соответствии со спецификацией CSS , но большинство браузеров не поддерживают это.

Изменить: я только что провел быстрый тест:

<a href="test.html" style="{color: blue; background: white} 
            :visited {color: green}
            :hover {background: yellow}
            :visited:hover {color: purple}">Test</a>

И это не работает в IE7, IE8 beta 2, Firefox или Chrome. Может ли кто-нибудь еще протестировать в других браузерах?

Гленн Славен
источник
3
Это рабочий проект CSS 3 с очень низким приоритетом, который не обновлялся шесть лет. Из спецификации: «Неуместно использовать Рабочие черновики W3C в качестве справочного материала или цитировать их как« незавершенные ». '
Джим
1
Правда, но браузеры реализовать некоторые правила CSS3, следует , вероятно , неправильное слово в этом контексте
Гленн Славен
Браузеры обычно реализуют функции CSS, которые находятся в стадии дальнейшей разработки, например, непрозрачность определяется цветом CSS (последний вызов), а запросы мультимедиа - кандидатом в рекомендацию.
Джим
Разве style = ": hover {}" не был бы эквивалентен "a {: hover {}}" в таблице стилей? Очевидно, это синтаксическая ошибка.
Kornel
33
Этот ответ был опубликован очень давно, с тех пор все изменилось, и текущая версия соответствующей спецификации W3C - CSS Style Attribute Rec. ( w3.org/TR/css-style-attr/#syntax ) - четко сказано, что атрибут стиля может содержать только содержимое блока объявления CSS. Теперь невозможно вставить псевдоэлементы с styleатрибутом.
Илья Стрельцын
24

Если вы только отлаживаете, вы можете использовать javascript для изменения css:

<a onmouseover="this.style.textDecoration='underline';" 
    onmouseout="this.style.textDecoration='none';">bar</a>
Алекси Юрттихо
источник
1
Искал решение с JSF, и это помогло мне это исправить. onmousemove = "this.style.color = '## {cc.attrs.color}';" onmouseout = "this.style.color = 'white';"
kdoteu 02
17

Простое решение:

   <a href="#" onmouseover="this.style.color='orange';" onmouseout="this.style.color='';">My Link</a>

Или же

<script>
 /** Change the style **/
 function overStyle(object){
    object.style.color = 'orange';
    // Change some other properties ...
 }

 /** Restores the style **/
 function outStyle(object){
    object.style.color = 'orange';
    // Restore the rest ...
 }
</script>

<a href="#" onmouseover="overStyle(this)" onmouseout="outStyle(this)">My Link</a>
Роберто
источник
16

Если это для отладки, просто добавьте класс css для зависания (поскольку элементы могут иметь более одного класса):

a.hovertest:hover
{
text-decoration:underline;
}

<a href="http://example.com" class="foo bar hovertest">blah</a>
Родрик Чепмен
источник
2
Вероятно, это самое близкое к желаемому эффекту, которое вы собираетесь получить
Гленн Славен
1

Я собрал быстрое решение для всех, кто хочет создавать всплывающие окна при наведении курсора без CSS с помощью поведения onmouseover и onmouseout.

http://jsfiddle.net/Lk9w1mkv/

<div style="position:relative;width:100px;background:#ddffdd;overflow:hidden;" onmouseover="this.style.overflow='';" onmouseout="this.style.overflow='hidden';">first hover<div style="width:100px;position:absolute;top:5px;left:110px;background:white;border:1px solid gray;">stuff inside</div></div>
Джош Кернич
источник
0

Если этот <p>тег создан из JavaScript, у вас есть другой вариант: использовать JSS для программной вставки таблиц стилей в заголовок документа. Это поддерживает '&:hover'. https://cssinjs.org/

Michielbdejong
источник
-2

Я не думаю, что jQuery поддерживает псевдоселекторы, но он предоставляет быстрый способ добавления событий к одному, многим или всем вашим аналогичным элементам управления и тегам на одной странице.

Лучше всего то, что вы можете связать привязки событий и делать все это в одной строке скрипта, если хотите. Намного проще, чем вручную редактировать весь HTML, чтобы включить или выключить их. Опять же, поскольку вы можете делать то же самое в CSS, я не знаю, что это вам что-то дает (кроме изучения jQuery).

CMPalmer
источник