Встроенный стиль, который будет действовать как: hover в CSS
Я знаю, что встраивание стилей 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>
... так как это будет применяться всегда, а не только во время наведения.
См. Также stackoverflow.com/questions/5293280/…
Ответы 7
Боюсь, это невозможно, селекторы псевдоклассов нельзя установить в строке, вам придется делать это на странице или в таблице стилей.
Я должен упомянуть, что технически вы должен можете сделать это согласно спецификации 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. Может ли кто-нибудь еще протестировать в других браузерах?
Это рабочий черновик CSS 3 с очень низким приоритетом, который не обновлялся шесть лет. Из спецификации: «Неуместно использовать Рабочие проекты W3C в качестве справочного материала или цитировать их как« незавершенные ». '
Верно, но браузеры реализуют некоторые правила CSS3, должен, вероятно, неправильное слово в этом контексте
Браузеры обычно реализуют функции CSS, которые находятся в стадии дальнейшей разработки, например непрозрачность взята из CSS Color (Last Call), а Media Queries является кандидатом в рекомендацию.
Разве style = ": hover {}" не был бы эквивалентен "a {: hover {}}" в таблице стилей? Очевидно, это синтаксическая ошибка.
Этот ответ был опубликован очень давно, с тех пор все изменилось, и текущая версия соответствующей спецификации W3C - CSS Style Attribute Rec. (w3.org/TR/css-style-attr/#syntax) - четко сказано, что атрибут стиля может содержать только содержимое блока объявления CSS. Таким образом, теперь невозможно вставить псевдоэлементы с атрибутом style.
Если вы только отлаживаете, вы можете использовать javascript для изменения CSS:
<a onmouseover = "this.style.textDecoration='underline';"
onmouseout = "this.style.textDecoration='none';">bar</a>
Искал решение с JSF, и это помогло мне это исправить. onmousemove = "this.style.color = '## {cc.attrs.color}';" onmouseout = "this.style.color = 'white';"
Если это для отладки, просто добавьте класс css для зависания (поскольку элементы могут иметь более одного класса):
a.hovertest:hover
{
text-decoration:underline;
}
<a href = "http://example.com" class = "foo bar hovertest">blah</a>
Это, вероятно, самое близкое к желаемому эффекту.
Я не думаю, что jQuery поддерживает псевдоселекторы, но он обеспечивает быстрый способ добавления событий к одному, многим или всем вашим аналогичным элементам управления и тегам на одной странице.
Лучше всего то, что вы можете связать привязки событий и сделать все это в одной строке скрипта, если хотите. Намного проще, чем вручную редактировать весь HTML, чтобы включить или выключить их. Опять же, поскольку вы можете делать то же самое в CSS, я не знаю, что это вам что-то дает (кроме изучения jQuery).
Простое решение:
<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>
Я собрал быстрое решение для всех, кто хочет создавать всплывающие окна без CSS, используя поведение onmouseover и onmouseout.
<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>
Если этот тег <p> создан из JavaScript, у вас есть другой вариант: использовать JSS для программной вставки таблиц стилей в заголовок документа. Он поддерживает '&:hover'. https://cssinjs.org/
Теоретически, если вы пытаетесь сделать наведение чего-то динамичным, вы можете использовать javascript для внедрения правила наведения в таблицу стилей, используя список существующих листов window.document.styleSheets.