小开

最佳答案

简短的回答：你不能。

长长的回答：你不应该。

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

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

对OP评论的回应：

有关动态添加CSS规则的好脚本，请参阅完全Pwn CSS与Javascript。另请参阅更改样式表了解有关该主题的一些理论。

另外，不要忘记，如果有选项，您可以添加外部样式表的链接。例如，

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

注意：上面假设有一个头部分。

小开

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

selector {rules}

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

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

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

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

小开

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

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

小开

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

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

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

小开

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

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

小开

根据您的评论，您无论如何都会发送一个JavaScript文件。在JavaScript中进行翻转。jQuery的$.hover()方法很容易，就像其他JavaScript包装器一样。在直接的JavaScript中也不太难。

小开

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

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

另外，我不确定this在这种情况下是否有效。你可能必须用document.getElementById('idForLink')切换它。

小开

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

不要说人们需要激活JavaScript。这只是一个样式问题，所以如果有一些没有JavaScript的访问者也没关系；）尽管web2.0中的大多数都与JavaScript一起使用。例如，请参阅facebook（大量JavaScript）或Myspace。

小开

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

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

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

小开

你能做到的在过去的某个时候。但是现在（根据同一标准的最新版本，这是候选推荐）你不能.

小开

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

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

小开

如前所述，您不能为悬停设置任意内联样式，但您可以在适当的标记中使用以下内容更改css中悬停光标的样式：

style="cursor: pointer;"

小开

使用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中的多单词样式（即#0）是一起编写的：

element.style.fontSize="12px"

小开

您可以通过添加类来执行id，但绝不能内联。

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

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

小开

我对此做出了很晚的贡献，但是我很难过看到没有人建议这样做，如果你真的需要内联代码，这是可能的。我需要它来制作一些悬停按钮，方法是这样的：

.hover-item {background-color: #FFF;}
.hover-item:hover {background-color: inherit;}

<a style="background-color: red;"><div class="hover-item">Content</div></a

在这种情况下，内联代码："background d-Color： red；"是悬停上的开关颜色，把你需要的颜色放入那里，然后这个解决方案就可以了。我意识到这在兼容性方面可能不是完美的解决方案，但如果绝对需要，这是有效的。

小开

我的问题是，我正在建立一个网站，它使用了很多图像图标，必须在悬停时由不同的图像交换（例如，蓝色图像在悬停时变成红色）。我为此编写了以下解决方案：

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

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

小开

现在已经很晚了，但是你什么时候会在超文本标记语言Email中使用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.

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

小开

这是最好的代码示例：

<astyle="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>

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

超文本标记语言

<astyle="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 herelibLink.onmouseover = function () {this.style.color='#0F0'}libLink.onmouseout = function () {this.style.color='#00F'}

小开

您可以这样做。但不是内联样式。您可以使用onmouseover和onmouseout事件：

<div style="background: #333; padding: 10px; cursor: pointer"onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">Hover on me!</div>

小开

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

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

<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

小开

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

首先我可以写这个

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的基本函数，然后你在这个函数中有一个悬停函数，当你悬停一个指向文本的指针时，颜色会改变，然后下一个，当你释放指向文本的指针时，它将是不同的颜色，这是第三个函数

小开

现在可以使用Hacss。

小开

虽然“你不应该”上下文可能适用，但在某些情况下，你仍然想实现这一点。我的用例是根据一些数据值动态设置悬停颜色要实现这一点，只有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"><ahref="/foo"class="dynamic-hover-color"style="color: #\{\{category.color}};">Category</a></li></ul></nav>

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

小开

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

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

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

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

小开

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

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

小开

不完全是内联CSS，但它是内联的哈哈

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

如何在内联CSS中编写：hover？

使用Javascript：

仅使用CSS

css

置标