如何在嵌入式CSS中编写a：hover？

1015

我有一种情况，必须编写内联CSS代码，并且要在锚点上应用悬停样式。

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

例如，您不能在HTML电子邮件中可靠地使用CSS类。

html  css  inline-styles 
— 阿姆·埃尔加希（Amr Elgarhy）
source
24
将html嵌入博客应用程序通常还需要排他使用内联样式。特别是如果您通过第三方客户端嵌入html并且无法访问用户主题。
— 普罗维登斯
8
为此有一个提议的CSS标准。不知道它可能具有哪种浏览器支持（提示：它们可能正在使用-moz等自定义标签）：w3.org/TR/2002/WD-css-style-attr-20020515
— 加藤
1
— Synetech
17
哦，拜托 有时，您只是在构建着陆页原型，而又不想去派发样式表或创建新的模板分支，或者只是为了测试绿色按钮是否更好地工作。嘘。
— ElBel
1
@FriendlyNeighborhoodIdiot此页面已经13岁了，从那以后该草稿就被放弃了。
— Tofandel 2014年

Answers:

574

简短的答案：您不能。

长答案：你不应该。

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

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

回应OP的评论：

有关动态添加CSS规则的良好脚本，请参见带有Javascript的Totally Pwn 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>

注意：以上假设存在头部。

— 乔纳森·芬兰
source
4
您可以在javascript中添加CSS类
— Jonathan Fingland 2009年
203
在其他情况下，内联CSS是唯一的选择-例如HTML电子邮件（例如，除非内联，否则Gmail会忽略CSS）。不幸的是，大多数电子邮件客户端中的Javascript也被剥夺了，我还没有找到添加：hover效果的方法。
— 西蒙东
24
@Kato虽然是一个很好的链接，但我真的希望它能工作，可惜它没有。只是为了确认，我使用语法进行了测试，style="{color:green;} :hover { color: red; }"并且firefox设法将链接的颜色设置为绿色，但忽略了悬停。Chrome忽略了两者。继续测试将毫无意义。
— Jonathan Fingland 2011年
9
我没有说这是一个可行的解决方案。我说并不是完全正确的说法是没有内联等效项，并且伪选择器在样式表之外没有任何意义。那怎么不合适？
— 加藤
5
为什么这么长的答案是您不应该 ……您……您不应该一概而论。我试图用html发送电子邮件，但您猜怎么着... gmail删除了所有样式标签，所有外部样式引用和所有脚本。所以...有什么方法可以设置发送到gmail的电子邮件中链接的悬浮颜色的样式？希望能做到...希望是最后死了！！！=）
— Miguel Angelo
433

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

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

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

— 亚历克斯·S
source
12
太聪明了！也适用于背景颜色悬停效果<div onMouseOver="this.style.backgroundColor='#F8F8F8'" onMouseOut="this.style.backgroundColor='#FFFFFF'"> ...
— mxro
46
必须嘲笑被视为“聪明”的人:)很难想象当这是实现此效果的主要/唯一方法时，有些人不在。或更糟糕的是，拥有一个“图像”并不得不交换图像，只是为了产生“悬停”效果。让我觉得老！但足以说，它的确回答了OP的问题:)
— Manachi 2014年
5
在这一点上，我必须同意Manachi。这就像回溯到90年代的地域javascript； P
— 埃里克·卡斯特罗
9
旧的，新的，古老的或领先的。它回答了问题，并帮助了我。谢谢@peter。
— user2060451 '16
4
我需要为一封电子邮件执行此操作，并且它起作用了。谢谢！与接受的答案不同，这实际上解决了问题。
— theUtherSide
53

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

— 福丁
source
3
所有其他答案都说不可能，但是您的答案表明有可能，您的答案有所不同，我正在测试。
— Amr Elgarhy 2012年
2
抱歉，我只是检查了这篇文章的日期。它已经十岁了。因此，不能保证它应该工作。如果可以，请也告诉我。
— fuddin 2012年
2
我测试了<a href="http://www.w3.org/" style="{color: #900} :link {background: #ff0} :visited {background: #fff} :hover {outline: thin red solid} :active {background: #00f}">...</a> ，但它没有工作
— 阿姆鲁Elgarhy
5
如果有人遇到这个答案，回答者发布了关于此功能的问题在这里：stackoverflow.com/questions/9884182/...
— BoltClock
9
准确地说，您可以在过去的某个时候这样做。但是现在（根据同一标准的最新修订版，即候选推荐标准），您不能这样做。
— Ilya Streltsyn
34

我特别迟促成这一点，但是我很遗憾地看到没有人提出这一点，如果你真的需要内嵌代码，这是可以做到的。我需要一些悬停按钮，方法是这样的：

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

— lukesrw
source
4
谢谢。这是一个很好的答案，我认为这个答案必须作为解决方案。
— Hovhannes Sargsyan
63
不，OP表示希望在HTML样式属性内的内联CSS中使用它。
— jj_
3
我知道，jj_-但是这种方法只允许您在CSS中放几行，并在很多地方重复使用，很多人（包括我自己）都发现这是一个有用的替代方法。
— lukesrw '16
2
这应该是实际的答案，并稍作修改：不要设置样式中的任何颜色，而只需设置将鼠标悬停时从父级继承的规则，然后内联设置这两种颜色即可。
— Hayko Koryun
4
这只是做到这一点的“正常”方法，每个人都说这是正确的方法。但是，这不是内联方式，这是OP的原始请求。
— wcndave
31

您无法完全执行所描述的内容，因为它a:hover是选择器的一部分，而不是CSS规则的一部分。样式表包含两个组件：

selector {rules}

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

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

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

<html>
  <style>
    #uniqueid:hover {do:something;}
  </style>
  <a id="uniqueid">hello</a>
</html>
— 雷克斯M
source
3
实际上，您不能：“ HTML在文档的HEAD部分中允许任何数量的STYLE元素。” （w3.org/TR/html4/present/styles.html#edef-STYLE）
— 埃里克·阿劳霍
2
在我的机器上工作。谢谢！
— 乔什·哈布达斯
@ÉricAraujo：然后将所有内容包装在<html> </html>标签下
— fuddin
30

使用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-sizeJava语言中的多字样式（即）是一起编写的：

element.style.fontSize="12px"

— 托杜亚
source
3
由于此答案已被修改，现在看来与原始问题完全无关...
— 比尔
1
哇，这是在框外思考...我喜欢它！
— theglossy1 '16
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>
展开摘要

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

的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'
}
展开摘要

— 用户1476842
source
10

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

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

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
— 墨迹
source
4
这个想法将幸运地被放弃。（请参阅lists.w3.org/Archives/Public/www-style/2009Jun/0341.html，在“废弃的工作草案”下。）
— Ms2ger，2009年
3
有一个。此答案中缺少。
— 乔尔
6 
<style>a:hover { }</style>
<a href="/">Go Home</a>

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

— 乔尔
source
2
@Derek，以备不时之需/对于其他任何人，请阅读：“〜/”（波浪号正斜杠）是asp.net Web应用程序中应用程序根目录的服务器端引用。（应用程序根目录当然可以是子文件夹）。在这里使用它可能是不正确的，因此自您提出问题以来，答案已被编辑的原因（我怀疑）。
— 克里斯（Chris）
5

你可以这样做。但不是内联样式。您可以使用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

根据您的评论，无论如何，您正在发送一个JavaScript文件。在JavaScript中进行过渡。jQuery的$.hover()方法非常简单，其他所有JavaScript包装器也是如此。在直接的JavaScript中也不是很难。

— 沙尼尔
source
尽管这是一种解决方法，但是它为我提供了一个很好的答案，并且如果真的不可能编写内嵌鼠标，则它是一个最佳答案
— Amr Elgarhy 2009年
4

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

也许有一些JavaScript库会将专有的style属性转换为style block。但是，这样的代码将不符合标准。

— m_vitaly
source
2

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

我的问题：我<a>在某些幻灯片/主要内容查看器周围有一个<a>标签，在页脚中也有一个标签。我希望它们在IE中位于相同的位置，因此onHover即使它们不是链接，整个段落也要加下划线：幻灯片整体是一个链接。IE不知道区别。我的页脚中也有一些实际的链接，这些链接确实需要下划线和颜色更改onHover。我以为我必须将样式与页脚标记内联以进行颜色更改，但是从上面的建议来看，这是不可能的。

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

— 丽兹
source
1

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

而且不要说人们需要激活JavaScript。这只是一个样式问题，因此，是否有一些没有JavaScript的访问者都没有关系；）尽管大多数Web 2.0使用JavaScript。例如，参见Facebook（许多JavaScript）或 Myspace。

— 杰森
source
0

现在还很晚，但是什么时候可以在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.

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

— 肖恩·斯宾塞
source
0

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

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

<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

— 网络猎犬
source
0

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

首先我可以写这个

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的基本功能，然后第二个功能是，当您将指针悬停在文本的颜色上时，该函数将具有悬停功能，然后下一个当您释放指向文本的指针时，它将是不同的颜色，这是第三个功能

— 西拉杰·艾哈迈德（Siraj Ahmed）
source
请避免发布重复的答案
— Simas Joneliunas
好的simas-joneliunas先生
— Siraj Ahmed
这些方法都不能解决问题中表达的问题。您根本不能在HTML格式的电子邮件中使用JS，而建议的另一种方法是使用明确排除的类。
— 昆汀
-1

我必须避免使用JavaScript，但可以使用服务器端代码。

所以我生成了一个ID，创建了一个样式块，并生成了具有该ID的链接。是的，它是有效的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>
展开摘要

— 香蕉酸
source
-2

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

a:hover {color:#FF00FF;}   /* Mouse-over link */
— 用户名
source
当然，您不需要外部工作表，只需使用style标签即可。
— Dmitri Zaitsev
-2

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

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

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

— 虫子
source
-3

我的问题是，我正在建立一个网站，该网站使用许多必须在悬停时由其他图像交换的图像图标（例如，蓝色图像在悬停时变为红色）。为此，我产生了以下解决方案：

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

我介绍了一个包含一对图像的容器。第一个是可见的，另一个是隐藏的（display：none）。悬停容器时，第一个变为隐藏（display：none），第二个再次出现（display：block）。

— 约赫姆·格森斯
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.