Я знаю, что встраивание стилей 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>
... так как это будет применяться все время, а не только во время зависания.
Я боюсь, что этого не может быть сделано, селектора псевдокласса не могут быть установлены в строке, вам придется делать это на странице или в таблице стилей.
Следует отметить, что технически вы должны это сделать в соответствии со спецификацией 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. Может ли кто-нибудь еще тестировать в любых других браузерах?
Если вы только отлаживаете, вы можете использовать javascript для изменения css:
<a onmouseover="this.style.textDecoration='underline';"
onmouseout="this.style.textDecoration='none';">bar</a>
Если это для отладки, просто добавьте класс css для зависания (поскольку элементы могут иметь более одного класса):
a.hovertest:hover
{
text-decoration:underline;
}
<a href="http://example.com" class="foo bar hovertest">blah</a>
Простое решение:
<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>
Я собрал быстрое решение для тех, кто хочет создавать всплывающие окна hover без 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>
Я не думаю, что jQuery поддерживает псевдоселекторов, но он обеспечивает быстрый способ добавления событий в один, многие или все ваши аналогичные элементы управления и теги на одной странице.
Лучше всего, вы можете связать привязки событий и сделать все это в одной строке script, если хотите. Гораздо проще, чем вручную редактировать весь HTML, чтобы включить или выключить их. Опять же, поскольку вы можете сделать то же самое в CSS, я не знаю, что он покупает вам что-нибудь (кроме обучения jQuery).