it-swarm.com.ru

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

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

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

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

868
Amr Elgarhy

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

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

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

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

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

Смотрите Totally Pwn CSS с Javascript для хорошего скрипта по динамическому добавлению правил 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

497
Jonathan Fingland

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

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

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

372
Alex S

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

48
Fahad Uddin

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

.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;" это переключение цвета при наведении, поместите туда нужный цвет, и тогда это решение сработает. Я понимаю, что это не может быть идеальным решением с точки зрения совместимости, однако это работает, если это абсолютно необходимо.

32
lukesrw

используя Javascript:

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

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

б) или немного более сложный метод - добавление «наведения мыши»

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

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

selector {rules}

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

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

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

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

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

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

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

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

style="cursor: pointer;"
7
rutherford

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

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

Предложение модератора: Держите разделение интересов.

HTML

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 class="lib-link">
   Library
</a>

JS

const libLink = document.getElementsByClassName("lib-link")[0];
// The array 0 assumes there is only one of these links,
// you would have to loop or use event delegation for multiples
// but we won't go into that here
libLink.onmouseover = function () {
  this.style.color='#0F0'
}
libLink.onmouseout = function () {
  this.style.color='#00F'
}

5
user1476842

Вы можете сделать это. Но не во встроенных стилях. Вы можете использовать события 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
user9277191
<style>a:hover { }</style>
<a href="/">Go Home</a>

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

4
Joel

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

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

4
m_vitaly

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

4
Vineel Shah

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

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

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

2
Liz

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

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

1
Jaysn

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

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

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

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

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