【问题标题】：How to write a:hover in inline CSS?如何在内联 CSS 中编写 a:hover？
【发布时间】：2010-11-05 05:05:03
【问题描述】：

我有一个案例，我必须编写内联 CSS 代码，并且我想在锚点上应用悬停样式。

如何在 HTML 样式属性内的内联 CSS 中使用 a:hover？

例如您无法在 HTML 电子邮件中可靠地使用 CSS 类。

【问题讨论】：

将 html 嵌入博客应用程序通常还需要独占使用内联样式。特别是如果您通过第三方客户端嵌入 html 并且无法访问用户的主题。
对此有一个提议的 CSS 标准；不知道它可能有什么样的浏览器支持（提示：他们可能正在使用自定义标签，如 -moz 等）：w3.org/TR/2002/WD-css-style-attr-20020515
Is is possible to create inline pseudo styles?的可能重复
哦，来吧。有时你只是在构建一个登陆页面原型，你不想去 fork 样式表或创建一个新的模板分支或其他任何东西来测试绿色按钮是否更好用。嘘。
@FriendlyNeighborhoodIdiot 此页面已有 13 年历史，草稿已被废弃。

标签： html css inline-styles

【解决方案1】：

简短的回答：你不能。

长答案：你不应该。

给它一个类名或一个 id 并使用样式表来应用样式。

:hover 是一个伪选择器，对于CSS，只在样式表中有意义。没有任何等效的内联样式（因为它没有定义选择标准）。

对 OP 的 cmets 的回应：

请参阅 Totally Pwn CSS with Javascript 了解动态添加 CSS 规则的好脚本。另请参阅 Change style sheet 了解有关该主题的一些理论。

另外，别忘了，如果可以的话，您可以添加指向外部样式表的链接。例如，

<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 部分。

【讨论】：

可以在javascript中添加css类
在其他情况下，内联 CSS 是 only 选项 - 例如 HTML 电子邮件（例如，Gmail 会忽略 CSS，除非它是内联的）。不幸的是，在大多数电子邮件客户端中也剥离了 Javascript，我还没有找到添加 :hover 效果的方法。
@Kato 虽然这是一个很好的链接，我真的希望它有效，但遗憾的是它没有。为了确认，我使用语法style="{color:green;} :hover { color: red; }" 进行了测试，Firefox 设法将链接着色为绿色，但忽略了悬停。 Chrome 忽略了两者。继续测试毫无意义。
我没有说它是一个可行的解决方案。我说不“完全”正确地说没有内联等效项并且伪选择器在样式表之外没有任何意义。这怎么不合适？
为什么长答案是你不应该...你...你不应该一概而论。我试图用 html 发送电子邮件，但你猜怎么着... gmail 删除了所有样式标签、所有外部样式引用和所有脚本。那么......有没有办法在发送到gmail的电子邮件中设置链接的悬停颜色？希望是这样……希望是最后一个死去的人！！！ =)

【解决方案2】：

您可以通过在 onMouseOver 和 onMouseOut 参数中使用 JavaScript 更改样式来获得相同的效果，但如果您需要更改多个元素，则效率极低：

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

另外，我无法确定this 在这种情况下是否有效。您可能需要使用document.getElementById('idForLink') 进行切换。

【讨论】：

这很聪明！也适用于背景颜色悬停效果<div onMouseOver="this.style.backgroundColor='#F8F8F8'" onMouseOut="this.style.backgroundColor='#FFFFFF'"> ...
首先，谢谢你，那么在内联样式中写li.selected {...}还有什么聪明的技巧吗？
不得不嘲笑这被视为“聪明”:) 很难想象当这是实现这种效果的主要/唯一方式时，有些人不在身边。或者更糟糕的是，要有一个“图像”并且必须换掉图像，只是为了给出“悬停”效果。让我觉得老了！但我只想说，它确实回答了 OP 的问题 :)
我必须同意 Manachi 的观点。这就像对 90 年代地理城市 javascript 的倒叙；P
我需要为一封电子邮件执行此操作，并且它有效。谢谢！与公认的答案不同，这实际上解决了问题。

【解决方案3】：

You could do it 在过去的某个时间点。但是现在（根据同一标准的最新版本，即候选推荐）你不能 .

【讨论】：

所有其他答案都说不可能，但你的表明这是可能的，你的答案不同，我正在测试它。
对不起，我刚刚检查了文章的日期。它已有 10 年历史。所以不能保证它应该工作。如果是这样，请也告诉我。
我测试了这个：<a href="http://www.w3.org/" style="{color: #900} :link {background: #ff0} :visited {background: #fff} :hover {outline: thin red solid} :active {background: #00f}">...</a> 但它不起作用
如果有人遇到这个答案，回答者在这里发布了一个关于这个功能的问题：stackoverflow.com/questions/9884182/…
更准确地说，您可以在过去的某个时间点做到这一点。但是现在（根据同一标准的最新版本，即候选推荐）you can't.

【解决方案4】：

您不能完全按照您的描述进行操作，因为a:hover 是选择器的一部分，而不是 CSS 规则的一部分。样式表有两个组件：

selector {rules}

内联样式只有规则；选择器隐含为当前元素。

选择器是一种表达性语言，它描述了一组标准来匹配类似 XML 的文档中的元素。

但是，您可以接近，因为从技术上讲，style 集几乎可以去任何地方：

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

【讨论】：

实际上你不能：“HTML 允许在文档的 HEAD 部分中包含任意数量的 STYLE 元素。” (w3.org/TR/html4/present/styles.html#edef-STYLE)
在我的机器上工作。谢谢！
@ÉricAraujo：然后将所有内容包装在<html> </html> 标签下

【解决方案5】：

我对此做出贡献的时间非常晚，但是我很遗憾没有人建议这样做，如果您确实需要内联代码，这是可以做到的。我需要一些悬停按钮，方法是这样的：

.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;”是悬停时的开关颜色，把你需要的颜色放在那里，然后这个解决方案就起作用了。我意识到这在兼容性方面可能不是完美的解决方案，但是如果绝对需要，它可以工作。

【讨论】：

谢谢。这是一个很好的答案，我认为这个答案必须作为解决方案。
不，OP 说他们希望它在 HTML 样式属性内的内联 CSS 中。
我知道，jj_- 但是这种方法只允许您将几行代码放入 CSS 中并在许多地方反复使用，很多人（包括我自己）发现这很有帮助替代。
这只是“正常”的做法，大家都说是正确的做法。但是它不是内联方式，这是 OP 原始请求。
关于内联样式的问题是有原因的，你没有使用内联样式。

【解决方案6】：

使用 Javascript：

a) 添加内联样式

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

b) 或更难的方法 - 添加“鼠标悬停”

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',''); };

注意：Javascript 中的多字样式（即font-size）是一起写的：

element.style.fontSize="12px"

【讨论】：

由于此答案已被编辑，现在看来与原始问题完全无关...
哇，这是跳出框框思考......我喜欢它！

【解决方案7】：

这是最好的代码示例：

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

【讨论】：

【解决方案8】：

虽然定义内联悬停规则似乎是不可能的，但您可以使用 CSS 变量内联定义样式的值：

:hover {
  color: var(--hover-color);
}

<a style="--hover-color: green">
    Library
</a>

考虑在选择器之外使用属性或类（例如[hover-color]:hover）以允许与其他低特异性悬停颜色更改规则共存。（来自例如 css 重置或使用默认样式的某些元素）

【讨论】：

喜欢这个解决方案！
迄今为止最好的解决方案

【解决方案9】：

当前的 CSS 迭代不支持内联伪类声明（不过，据我了解，它可能会出现在未来的版本中）。

目前，您最好的选择可能是直接在您想要设置样式的链接上方定义一个样式块：

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

【讨论】：

幸运的是这个想法会被放弃。（见lists.w3.org/Archives/Public/www-style/2009Jun/0341.html，在“废弃的工作草案”下。）
有一个 .此答案中缺少。

【解决方案10】：

正如所指出的，您不能为悬停设置任意内联样式，但您可以在 CSS 中使用相应标记中的以下内容更改悬停光标的样式：

style="cursor: pointer;"

【讨论】：

这应该是最好的答案

【解决方案11】：

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

Hover 是一个伪类，因此不能与样式属性一起应用。它是选择器的一部分。

【讨论】：

@Derek 以防万一/其他人阅读：“~/”（波浪号正斜杠）是对 asp.net Web 应用程序中应用程序根目录的服务器端引用。（当然，应用程序根目录可能是一个子文件夹）。它在这里的使用是不正确的，因此自从您提出问题以来，答案就被编辑了（我怀疑）。

【解决方案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】：

根据您的 cmets，无论如何您都在发送 JavaScript 文件。在 JavaScript 中进行翻转。 jQuery 的 $.hover() 方法使它变得简单，就像所有其他 JavaScript 包装器一样。直接使用 JavaScript 也不太难。

【讨论】：

虽然这是一种解决方法，但它对我来说是一个很好的答案，如果真的不可能写内联悬停，最好的答案

【解决方案14】：

没有办法做到这一点。您的选择是使用 JavaScript 或 CSS 块。

也许有一些 JavaScript 库会将专有样式属性转换为样式块。但是代码将不符合标准。

【讨论】：

【解决方案15】：

你可以编写各种类型的代码

首先我可以写这个

html

<a href="https://www.google.com/" onMouseOver="this.style.color='red'"
        onMouseOut="this.style.color='blue'" class="one">Hello siraj</a>

css

.one{
  text-decoration: none;
}

你可以试试其他方法

html

<a href="https://www.google.com/" class="one">Hello siraj</a>

css

.one{
text-decoration: none;
}

.one:hover{
color:blue;
}

.one:active{
color: red;
}

你也可以尝试在 jquery 中悬停

java 脚本

$(document).ready(function(){
  $("p").hover(function(){
    $(this).css("background-color", "yellow");
    }, function(){
    $(this).css("background-color", "pink");
  });
});

html

<p>Hover the mouse pointer over this paragraph.</p>

在这段代码中，您在 jquery 中有一个三个函数，首先您准备了一个函数，它是 jquery 的基本功能，然后您在此函数中有一个悬停函数，当您将指针悬停在文本时，颜色将被更改并且然后下一个当你释放指向文本的指针时，它将是不同的颜色，这是第三个函数

【讨论】：

请避免发布重复的答案
这些方法都不能解决问题中表达的问题。您根本不能在 HTML 格式的电子邮件中使用 JS，而您建议的另一种方法使用明确排除的类。

【解决方案16】：

我只是想出了一个不同的解决方案。

我的问题：我在一些幻灯片/主要内容查看器周围有一个<a> 标签，在页脚中有<a> 标签。我希望他们去 IE 中的同一个地方，所以整个段落将在onHover 下加下划线，即使它们不是链接：整个幻灯片是一个链接。 IE 不知道区别。我的页脚中还有一些实际链接需要下划线和颜色更改onHover。我以为我必须将样式与页脚标签内联以使颜色发生变化，但上面的建议表明这是不可能的。

解决方案：我给页脚链接两个不同的类，我的问题就解决了。我能够在一类中更改onHover 颜色，让幻灯片onHover 没有颜色更改/下划线，并且仍然能够同时在页脚和幻灯片中使用外部HREFS！

【讨论】：

【解决方案17】：

我同意影子。您可以使用 onmouseover 和 onmouseout 事件通过 JavaScript 更改 CSS。

不要说人们需要激活 JavaScript。这只是一个样式问题，所以如果有一些访问者没有 JavaScript 也没关系；）尽管大部分Web 2.0 都使用JavaScript。例如，请参阅 Facebook（大量 JavaScript）或 Myspace。

【讨论】：

【解决方案18】：

这在游戏中已经很晚了，但是您什么时候会在 HTML 电子邮件中使用 JavaScript？例如，在我目前工作的公司（与 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.

如果有人对此主题有更多见解，请随时纠正我。谢谢。

【讨论】：

【解决方案19】：

所以这不是用户正在寻找的东西，但我发现这个问题正在寻找答案并想出了一些相关的东西。我有一堆重复的元素，它们需要一个新的颜色/悬停在其中的标签上。我使用把手，这是我的解决方案的关键，但其他模板语言也可以工作。

我定义了一些颜色并将它们传递给每个元素的车把模板。在模板的顶部，我定义了一个样式标签，并放入了我的自定义类和悬停颜色。

<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

【讨论】：

【解决方案20】：

虽然“您不应该”的上下文可能适用，但在某些情况下您仍然希望实现这一点。 我的用例是根据某些数据值动态设置悬停颜色，以实现仅使用 CSS 即可从特异性中受益。

仅使用 CSS

CSS


/* Set your parent color for the inherit property */
.sidebar {
  color: green;
}

/* Make sure your target element "inherit" parent color on :hover and default */
.list-item a {
  color: inherit
}

.list-item a:hover {
  color: inherit
}

/* Create a class to allows to get hover color from inline style */
.dynamic-hover-color:not(:hover) {
  color: inherit !important;
}

那么你的标记会有点像：

标记

<nav class="sidebar">
  <ul>
    <li class="list-item">
      <a
        href="/foo"
        class="dynamic-hover-color"
        style="color: #{{category.color}};"
      >
        Category
      </a>
    </li>
  </ul>
</nav>

我正在使用把手做这个例子，但想法是你可以使用任何方便你的用例来设置内联样式（即使它是手动编写你想要的悬停颜色）

【讨论】：

【解决方案21】：

您可以像这样使用内联样式表语句：

<style>#T1:hover{color:red}</style><span id=T1>Your Text Here</span>

【讨论】：

但它不是内联样式...
对不起，我是说内联样式表。我已经更正了我的答案。

【解决方案22】：

现在可以使用Hacss。

【讨论】：

【解决方案23】：

您只能在外部样式表中使用伪类a:hover。因此我推荐使用外部样式表。代码是：

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

【讨论】：

当然你不需要外部表格，只需使用style标签。

【解决方案24】：

你可以通过添加一个类来做id，但不能内联。

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

2 行，但您可以在任何地方重复使用该类。

【讨论】：

【解决方案25】：

我不得不避免使用 javascript，但可以使用服务器端代码。只能在调用该代码的地方访问一组元素。它必须与现有的 JavaScript 一起工作，因此数据属性不会干扰。

所以我生成了一个存储在 data 属性中的 id，创建了一个样式块，生成了具有该 id 的链接。是的，它的有效 HTML。只是不是最佳实践。

/* for the demo code here */
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>

【讨论】：

【解决方案26】：

我的问题是我正在构建一个网站，该网站使用大量图像图标，这些图标必须在悬停时由不同的图像交换（例如，蓝色图像在悬停时变成红色）。为此，我提出了以下解决方案：

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

我介绍了一个包含这对图像的容器。第一个是可见的，另一个是隐藏的（显示：无）。悬停容器时，第一个变为隐藏（显示：无），第二个再次显示（显示：块）。

【讨论】：