Как написать: наведите курсор на встроенный CSS?

У меня есть случай, когда я должен написать встроенный CSS-код, и я хочу применить стиль наведения на якоре.

Как я могу использовать a:hover в встроенном CSS внутри атрибута стиля HTML?

например. вы не можете надежно использовать классы CSS в письмах HTML.

861
23 июня '09 в 18:07
источник поделиться
22 ответов

Короткий ответ: вы не можете.

Длинный ответ: вы не должны.

Дайте ему имя класса или идентификатор и используйте стили для применения стиля.

:hover является псевдоселектором и для CSS имеет смысл только в таблице стилей. Нет никакого эквивалента inline-стиля (поскольку он не определяет критерии выбора).

Ответ на комментарии OP:

См. Полностью Pwn CSS с Javascript для хорошего script при динамическом добавлении правил CSS. Также см. Изменить таблицу стилей для некоторой теории по этому вопросу.

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

<script type="text/javascript">
  var link = document.createElement("link");
  link.setAttribute("rel","stylesheet");
  link.setAttribute("href","http://wherever.com/yourstylesheet.css");
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(link);
</script>

Предостережение: вышеупомянутое предполагает, что есть раздел head.

493
23 июня '09 в 18:09
источник

Связанные вопросы


Похожие вопросы

Вы можете получить тот же эффект, изменив свои стили с помощью JavaScript в параметрах onMouseOver и onMouseOut, хотя он крайне неэффективен, если вам нужно изменить несколько элементов:

<a href="abc.html"
   onMouseOver="this.style.color='#0F0'"
   onMouseOut="this.style.color='#00F'" >Text</a>

Кроме того, я не могу точно помнить, работает ли this в этом контексте. Возможно, вам придется переключить его с помощью document.getElementById('idForLink').

368
23 июня '09 в 18:16
источник

Вы могли бы сделать это в какой-то момент в прошлом. Но сейчас (согласно последней редакции того же стандарта, который является Рекомендацией кандидата) вы не можете.

47
27 марта '12 в 8:59
источник

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

.hover-item {
	background-color: #FFF;
}

.hover-item:hover {
	background-color: inherit;
}
<a style="background-color: red;">
	<div class="hover-item">
		Content
	</div>
</a

В этом случае встроенный код: "background-color: red;" это цвет переключателя при наведении, поместите нужный вам цвет, а затем это решение работает. Я понимаю, что это не может быть идеальным решением с точки зрения совместимости, однако это работает, если это абсолютно необходимо.

31
10 авг. '15 в 12:41
источник

используя Javascript:

a) Добавление встроенного стиля

document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');

b) или немного более сложный метод - добавление "mouseover"

document.getElementById("mydiv").onmouseover= function(e){this.className += ' my-special-class'; };
document.getElementById("mydiv").onmouseleave= function(e){this.className = this.className.replace('my-special-class',''); };

Примечание: многословные стили (т.е. font-size) в Javascript записываются вместе:

element.style.fontSize="12px"

28
22 июля '13 в 11:33
источник

Вы не можете делать то, что вы описываете, поскольку a:hover является частью селектора, а не правилами CSS. Таблица стилей имеет два компонента:

selector {rules}

В строковых стилях есть только правила; селектор неявно является текущим элементом.

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

Тем не менее, вы можете приблизиться, потому что набор style может технически идти в любом месте:

<html>
    <style>
    #uniqueid:hover {do:something;}
    </style>
    <a id="uniqueid">hello</a>
 </html>
26
23 июня '09 в 18:10
источник

Вложенные объявления псевдокласса не поддерживаются в текущей итерации CSS (хотя, насколько я понимаю, она может появиться в будущей версии).

На данный момент лучше всего просто определить блок стиля непосредственно над ссылкой, которую вы хотите стилизовать:

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
10
23 июня '09 в 18:11
источник

Как уже указывалось, вы не можете установить произвольные встроенные стили для наведения, но вы можете изменить стиль наведения курсора в CSS с помощью следующего в соответствующем теге:

style="cursor: pointer;"
6
01 мая '13 в 15:58
источник
<style>a:hover { }</style>
<a href="/">Go Home</a>

Наведение представляет собой псевдокласс и поэтому не может применяться с атрибутом стиля. Это часть селектора.

5
23 июня '09 в 18:10
источник

Вы можете сделать это. Но не в встроенных стилях. Вы можете использовать onmouseover и onmouseout события:

<div style="background: #333; padding: 10px; cursor: pointer"
   onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
      Hover on me!
</div>
4
15 нояб. '18 в 22:52
источник

Согласно вашим комментариям, вы все равно отправляете файл JavaScript. Сделайте опрокидывание в JavaScript. jQuery $.hover() метод упрощает работу, как и всякая другая оболочка JavaScript. Это не слишком сложно в прямом JavaScript.

4
23 июня '09 в 18:13
источник

Нет никакого способа сделать это. Ваши варианты должны использовать JavaScript или блок CSS.

Возможно, есть библиотека JavaScript, которая преобразует собственный атрибут стиля в блок стиля. Но тогда код не будет стандартным.

4
23 июня '09 в 18:11
источник

Я просто понял другое решение.

Моя проблема: у меня есть тег <a> вокруг некоторых слайдов/основного просмотра контента, а также тегов <a> в нижнем колонтитуле. Я хочу, чтобы они переместились в одно и то же место в IE, поэтому весь абзац будет подчеркнут onHover, хотя они не являются ссылками: слайд как целое - это ссылка. IE не знает разницы. У меня также есть некоторые фактические ссылки в нижнем колонтитуле, которые нуждаются в подчеркивании и изменении цвета onHover. Я думал, что мне нужно будет добавить стили с тегами нижнего колонтитула, чтобы изменить цвет, но советы сверху говорят о том, что это невозможно.

Решение: я дал ссылку нижнего колонтитула два разных класса, и моя проблема была решена. Мне удалось изменить цвет цвета onHover в одном классе, слайды onHover не имеют изменения цвета/подчеркивания и все еще могут иметь внешний HREFS в нижнем колонтитуле и слайдах одновременно!

2
08 сент. '11 в 19:57
источник

Это лучший пример кода:

<a style="color:blue;text-decoration: underline;background: white;"   href="http://aashwin.com/index.php/education/library/"    onMouseOver="this.style.color='#0F0'"
   onMouseOut="this.style.color='#00F'">Library</a>
2
14 янв. '18 в 0:31
источник

Я согласен с тенью. Вы можете использовать событие onmouseover и onmouseout, чтобы изменить CSS через JavaScript.

И не говорите, что нужно активировать JavaScript. Это только проблема стиля, поэтому не имеет значения, есть ли у посетителей без JavaScript;) Хотя большая часть Web 2.0 работает с JavaScript. См. Facebook например (много JavaScript) или Myspace.

1
26 марта '10 в 13:22
источник

Вы МОЖЕТЕ использовать JavaScript только в случае неудачи. Это не самое практичное решение, но оно может служить вашим целям.

0
05 дек. '17 в 7:03

Так что это не совсем то, что искали пользователи, но я нашел этот вопрос в поисках ответа и придумал что-то вроде родственного. У меня было множество повторяющихся элементов, которым нужен новый цвет/наведение для вкладки внутри них. Я использую рули, которые являются ключевыми для моего решения, но могут работать и другие языки с шаблонами.

Я определил некоторые цвета и передал их в шаблон handlebars для каждого элемента. В верхней части шаблона я определил тег стиля и поместил в свой пользовательский класс и цвет наведения.

<style type="text/css">
    .{{chart.type}}-tab-hover:hover {
        background-color: {{chart.chartPrimaryHighlight}} !important;
    }
</style>

Затем я использовал стиль в шаблоне:

<span class="financial-aid-details-header-text {{chart.type}}-tab-hover">
   Payouts
</span>

Вам может не понадобиться !important

0
07 дек. '18 в 1:15
источник

Это довольно поздно в игре, но когда вы будете использовать JavaScript в электронной почте HTML? Например, в компании, в которой я сейчас работаю (рифмы с Abodee), мы используем самый низкий общий знаменатель для большинства рекламных кампаний по электронной почте - и JavaScript просто не используется. Когда-либо. Если вы не ссылаетесь на какую-то предварительную обработку.

Как упоминалось в соответствующем сообщении: "Lotus Notes, Mozilla Thunderbird, Outlook Express и Windows Live Mail все, похоже, поддерживают какой-то запуск JavaScript. Ничто другое не делает".

Ссылка на статью, из которой это было сделано: [ http://en.wikipedia.org/wiki/Comparison_of_e-mail_clients]

Кроме того, как бы переходить на мобильные устройства? Вот почему мне нравится ответ сверху: Long answer: you shouldn't.

Если у кого-то есть больше информации по этому вопросу, пожалуйста, не стесняйтесь меня исправлять. Спасибо.

0
13 дек. '17 в 0:13
источник

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

поэтому я сгенерировал идентификатор, создал блок стиля, сгенерировал ссылку с этим идентификатором. Да, это действительный HTML.

a {
  text-decoration: none;
  color: blue; 
}

a:hover {
  color: blue;
  font-weight: bold;
}
<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-123"] { color: green;  } 
  a[data-hover="rnd-id-123"]:hover { color: red; }
</style>
<a data-hover="rnd-id-123">some link 1</a>

<br>

<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-456"] { color: purple;  }
  a[data-hover="rnd-id-456"]:hover { color: orange; }
</style>
<a data-hover="rnd-id-456">some link 2</a>
0
19 янв. '19 в 17:38
источник

Моя проблема заключалась в том, что я создаю веб-сайт, на котором используется множество значков изображений, которые нужно поменять другим изображением при наведении (например, синие изображения становятся красными на паре). Для этого я произвел следующее решение:

.container div {
  width: 100px;
  height: 100px;
  background-size: 100px 100px;
}
.container:hover .withoutHover {
  display: none;
}
.container .withHover {
  display: none;
}
.container:hover .withHover {
  display: block;
}
<p>Hover the image to see it switch with the other. Note that I deliberately used inline CSS because I decided it was the easiest and clearest solution for my problem that uses more of these image pairs (with different URL's).
</p>
<div class=container>
<div class=withHover style="background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQrqRsWFJ3492s0t0NmPEcpTQYTqNnH188R606cLOHm8H2pUGlH')"></div>
<div class=withoutHover style="background-image: url('http://i.telegraph.co.uk/multimedia/archive/03523/Cat-Photo-Bombs-fa_3523609b.jpg')"></div>
</div>

Я представил контейнер, содержащий пару изображений. Первое видно, а другое скрыто (display: none). При падении контейнера первый становится скрытым (display: none), а второй появляется снова (display: block).

-2
29 авг. '16 в 22:05
источник

Вы можете сделать id, добавив класс, но никогда не встроенный.

<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>

2 строки, но вы можете повторно использовать класс везде.

-2
04 авг. '14 в 22:47
источник

Вы можете использовать псевдокласс a:hover только во внешних таблицах стилей. Поэтому я рекомендую использовать внешнюю таблицу стилей. Код:

a:hover {color:#FF00FF;}   /* Mouse-over link */
-2
19 июня '12 в 15:18
источник

Посмотрите другие вопросы по меткам или Задайте вопрос