Как написать: hover во встроенном CSS?

Question

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

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

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

Answer 1

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

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

Answer 2

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

Answer 3

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

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

Answer 4

Я только что нашел другое решение.

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

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

Answer 5

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

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

Answer 6

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

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

Answer 7

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

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

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

Answer 8

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

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

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

Answer 9

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

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

<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

Answer 10

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