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

Question

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

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

Что синтаксис для встраивания правила, как:

a:hover {text-decoration: underline;} 

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

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

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

Answer 1

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

Следует отметить, что технически вы должны быть в состоянии сделать это according to the CSS spec, но большинство браузеров не поддерживают его

Edit: Я просто сделал быстрый тест с этим:

<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. Может ли кто-нибудь еще тестировать в любых других браузерах?

Answer 2

Если вы только отладки, вы можете использовать JavaScript, чтобы изменить CSS:

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

Answer 3

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

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

<a href="http://example.com" class="foo bar hovertest">blah</a> 

Answer 4

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

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

Answer 5

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

<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> 

Answer 6

я соединял быстрое решение для тех, кто хочет создать всплывающие окна при наведении курсора мыши без 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>