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

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

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

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

Ответы

Ответ 1

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

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

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

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

Ответ 2

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

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

Ответ 3

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

Ответ 4

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

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

.hover-item:hover {
	background-color: inherit;
}

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

Ответ 5

используя 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"

Ответ 6

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

selector {rules}

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

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

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

<html>
    <style>
    #uniqueid:hover {do:something;}
    </style>
    <a id="uniqueid">hello</a>
 </html>

Ответ 7

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

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

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>

Ответ 8

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

style="cursor: pointer;"

Ответ 9

<style>a:hover { }</style>
<a href="/">Go Home</a>

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

Ответ 10

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

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

Ответ 11

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

Ответ 12

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

<div style="background: #333; padding: 10px; cursor: pointer"
   onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
      Hover on me!
</div>

Ответ 13

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

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

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

Ответ 14

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

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

Ответ 15

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

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

Ответ 16

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

Ответ 17

Это довольно поздно в игре, но когда вы будете использовать 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.

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

Ответ 18

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

Я определил некоторые цвета и передал их в шаблон 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

Ответ 19

Я должен был избежать 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>

Ответ 20

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

a:hover {color:#FF00FF;}   /* Mouse-over link */

Ответ 21

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

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

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

Ответ 22

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

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