Встроенный стиль, чтобы действовать как: наведите курсор в CSS

Question

Встроенный стиль, чтобы действовать как: наведите курсор в CSS

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

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

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

a:hover {text-decoration: underline;}

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

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

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

501 6

html css

6 ответов:

Comments

Ничего не найдено.

Glenn Slaven · Accepted Answer · 2016-10-31 05:42:43

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

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

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

Aleksi Yrttiaho · Accepted Answer · 2014-10-29 20:49:38

Если вы только отлаживаете, вы можете использовать javascript для изменения css:
<a onmouseover="this.style.textDecoration='underline';" 
    onmouseout="this.style.textDecoration='none';">bar</a>

Rodrick Chapman · Accepted Answer · 2008-09-25 09:08:41

Если это для отладки, просто добавьте класс css для зависания (так как элементы могут иметь более одного класса):
a.hovertest:hover
{
text-decoration:underline;
}

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

Roberto · Accepted Answer · 2014-08-15 23:45:28

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

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

Josh Kernich · Accepted Answer · 2014-10-15 02:23:56

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

CMPalmer · Accepted Answer · 2008-09-25 09:11:49

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

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