Вбудований стиль, щоб діяти як: наведення в CSS

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

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

Який синтаксис для вбудування правила, наприклад:

a:hover {text-decoration: underline;}

в атрибут style тегу 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>

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

Якщо цей <p>тег створений з JavaScript, то у вас є інший варіант: використовуйте JSS, щоб програмно вставляти таблиці стилів у головку документа. Це підтримує '&:hover'. https://cssinjs.org/

Я не думаю, що jQuery також підтримує псевдоселектори, але він забезпечує швидкий спосіб додавання подій до одного, багатьох або всіх ваших подібних елементів керування та тегів на одній сторінці.

Найкраще, ви можете зв’язати прив’язки події та зробити все це в одному рядку сценарію, якщо хочете. Набагато простіше, ніж вручну редагувати весь HTML, щоб увімкнути або вимкнути їх. Знову ж таки, оскільки ви можете робити те саме в CSS, я не знаю, що він вам щось купує (крім вивчення jQuery).