logo标签列表

如何在内联CSS中编写'a:hover'？

htmlcssinline-styles
1333

我有一个情景需要编写内联CSS代码，我想在锚点上应用悬停样式。

如何在HTML的style属性中使用a:hover实现？

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

31
将HTML嵌入博客应用程序通常需要专门使用内联样式，特别是当您通过第三方客户端嵌入HTML并且无法访问用户的主题时。 - providence
11
有一个提议的CSS标准可以解决这个问题；目前不清楚它在浏览器的支持情况（提示：可能需要使用类似于“-moz”等自定义标签）：http://www.w3.org/TR/2002/WD-css-style-attr-20020515 - Kato
36
哎呀，有时候你只是在制作一个着陆页的原型，不想去分叉样式表或创建新的模板分支来测试绿色按钮是否更有效。唉。 - ElBel
2
@FriendlyNeighborhoodIdiot 这个页面已经有13年的历史了，而且这个草稿也被放弃了。 - Tofandel
2
我看到没有一个答案回应HTML电子邮件的用例。实际上，对于这种情况，您确实可以使用标准（嵌入式）CSS。并非每个电子邮件客户端都能接受它，但许多客户端可以。 - Nathan
显示剩余5条评论
24个回答
726
短答案：你不能。
长答案：你不应该这样做。
给它一个类名或id，使用样式表来应用样式。
":hover"是一个伪选择器，在CSS中只有在样式表中才有意义。没有任何内联样式的等效方法（因为它不定义选择条件）。
回复OP的评论：
参见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部分。

5
你可以在 JavaScript 中添加 CSS 类。 - Jonathan Fingland
279
在某些情况下，内联CSS是唯一的选择，比如HTML邮件（例如，Gmail只有在内联CSS时才会解析CSS）。不幸的是，在大多数邮件客户端中，JavaScript也被禁用了，因此我还没有找到一种添加:hover效果的方法。 - Simon East
31
@Kato 虽然那是一个很棒的链接，我真的希望它能够起作用，但可悲的是它并没有。为了确认一下，我使用语法style="{color:green;} :hover { color: red; }" 进行测试，火狐浏览器可以将链接颜色变为绿色，但忽略了:hover（悬停）效果。谷歌浏览器两个都忽略了。继续测试将毫无意义。 - Jonathan Fingland
10
我并没有说它是一个可行的解决方案。我说，并不完全正确地说，没有内联等效项，伪选择器在样式表之外没有意义。这有什么不妥吗？ - Kato
13
为什么回答很长是“你不应该”...你...不应该笼统地概括。我试图发送带有HTML的电子邮件消息，但猜猜看... Gmail会删除所有样式标签、所有外部样式引用和所有脚本。那么...有没有办法为发送到Gmail的电子邮件中链接的悬停颜色设置样式？希望可以...希望是最后死去的！！！=) - Miguel Angelo
显示剩余25条评论
625

如果您需要更改多个元素，则可以使用JavaScript在onMouseOver和onMouseOut参数中更改样式，尽管这种方法效率极低：

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

另外，我不确定在这种情况下this是否有效。你可能需要将它替换为document.getElementById('idForLink')。

20
聪明！它也适用于背景颜色悬停效果。 <div onMouseOver="this.style.backgroundColor='#F8F8F8'" onMouseOut="this.style.backgroundColor='#FFFFFF'"> ... - mxro
62
这让我有点好笑，竟然被认为是“聪明” :) 很难想象有些人不知道这曾经是实现这种效果的主要/唯一途径。更糟糕的是，有些人需要更换图像才能实现“悬停”效果。让我感觉老了！但可以肯定的是，它确实回答了发布者的问题 :) - Manachi
可以使用onMouseOver="this.style.backgroundColor='transparent'"，同样适用于onmouseout，从而删除悬停背景颜色的应用。 - Jay Rizzi
8
我同意Manachi的观点。这就像是90年代的Geocities JavaScript闪回；P - Eric Castro
7
谢谢！这真的解决了问题，与被接受的答案不同，我需要将它用于电子邮件。 - theUtherSide
显示剩余4条评论
64

你曾经可以这样做在过去的某个时候。但是现在（根据同一标准的最新修订，即候选推荐），你不能这样做。

3
其他答案都说不可能，但是你的回答表明是可能的，你的回答与众不同，我正在测试它。 - Amr Elgarhy
2
抱歉，我刚刚查看了文章的日期。它已经有10年了，所以不能保证它能正常工作。如果确实可以，请告诉我一声。 - user379888
4
我测试了这段代码：<a href="http://www.w3.org/" style="{color: #900} :link {background: #ff0} :visited {background: #fff} :hover {outline: thin red solid} :active {background: #00f}">...</a>，但它没有起作用。 - Amr Elgarhy
5
如果有人遇到这个答案，请注意，回答者在此发布了一个关于此功能的问题：https://dev59.com/rGHVa4cB1Zd3GeqPsP7J - BoltClock
11
更准确地说，过去某个时间点你可以这样做。但是现在（根据相同标准的最新修订版，即“候选推荐”），你无法这样做。 - Ilya Streltsyn
显示剩余9条评论
52

您无法完全实现您所描述的功能，因为 a:hover 是选择器的一部分，而不是 CSS 规则。样式表有两个组成部分：

selector {rules}

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

选择器是一种表达式语言，用于描述在类似XML的文档中匹配元素的一组条件。

但是，你可以接近实现，因为一个style集合在技术上几乎可以放在任何地方：

<html>
  <style>
    #uniqueid:hover {do:something;}
  </style>
  <a id="uniqueid">hello</a>
</html>
4
实际上，你是可以的：“HTML允许在文档的HEAD部分有任意数量的STYLE元素。”（http://www.w3.org/TR/html4/present/styles.html#edef-STYLE） - merwok
5
在我的机器上可以运行。谢谢！ - vhs
@ÉricAraujo：然后将所有内容包装在<html> </html>标记下面。 - user379888
45
虽然似乎不可能在行内定义一个悬停规则，但可以使用CSS变量在行内定义样式的值。 

:hover {
  color: var(--hover-color);
}
<a style="--hover-color: green">
    Library
</a>

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

43

如果你确实需要内联代码，这是可以做到的。我需要用它来制作一些悬停按钮，方法如下：

.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;”是鼠标悬停时切换颜色的内联代码。使用你需要的颜色，那么这个解决方案就能够起作用。我意识到这个解决方案在兼容性方面可能不是完美的，但如果绝对需要，这种方法是有效的。
4
谢谢。这是一个很好的回答，我认为这个回答必须成为解决方案。 - Hovhannes Sargsyan
108
不，OP说他们想把它放在HTML style属性内的行内CSS中。 - Redoman
3
我知道，jj_-。然而这种方法让你只需要在CSS中写几行代码，就能在很多地方重复使用它，很多人（包括我自己）发现这是一个有用的替代方案。 - lukesrw
10
这只是“正常”的做法，人们认为这是正确的方式。然而，它不是一种内联的方式，而这是原始帖子的要求。 - wcndave
4
问题之所以问到内联样式是有原因的，因为你没有使用内联样式。 - shinzou
显示剩余7条评论
33

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

注意：JavaScript中的多字样式（例如font-size）书写时需要连写：

element.style.fontSize="12px"
3
由于这个回答被编辑过，现在看起来与原来的问题完全不相关。 - Bill
1
哇，这是超越常规的思维...我喜欢它！ - theglossy1
29

这是最好的代码示例：

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

主持人建议：保持你的关注点分离。

在IT技术中，关注点分离是一种设计原则，旨在将不同方面的功能分开处理，从而提高代码的可维护性和可扩展性。

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

这个！谢谢 - 这是唯一对我有用的东西。对于这个问题来说，这是一个简单的解决方案。 - Emma Earl Kent
14

当前版本的CSS不支持内联伪类声明（尽管据我所知，它可能会在未来版本中出现）。

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

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
5
那个想法将被废弃，详情请参见http://lists.w3.org/Archives/Public/www-style/2009Jun/0341.html（在“Abandoned Working Drafts”下）。 - Ms2ger
12

如已指出，您无法为悬停设置任意内联样式，但是您可以使用以下CSS在适当的标记中更改悬停光标的样式：

style="cursor: pointer;"
2
这应该是最佳答案。 - Vladislav Guleaev
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接