如何写一个：hover在内联CSS？
我有一个情况，我必须写内联CSS代码，并且我想要在锚上应用hover样式。
如何在HTML样式属性中使用a:hover in inline CSS？
例如，你不能可靠地在HTML电子邮件中使用CSS类。
简短的回答：你不能。
长答案：你不应该。
给它一个类名或ID，并使用样式表来应用样式。
:hover是一个伪select器，对CSS来说 ，只在样式表中有含义。 没有任何内联样式等价物（因为它没有定义select标准）。
回应OP的评论：
完全看到与JavaScript的Pwn CSS为dynamic添加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>
注意：上面假设有一个头部分。
您可以通过onMouseOver和onMouseOut参数中的JavaScript改变样式来获得相同的效果，但是如果您需要更改多个元素，则效率极低：
<a href="abc.html" onMouseOver="this.style.color='#0F0'" onMouseOut="this.style.color='#00F'" >Text</a>
另外，我不记得this适用于这种情况。 你可能不得不用document.getElementById('idForLink')来切换它。
更准确的说， 你可以在过去的某个时候做到这一点。 但是现在（根据相同标准的最新版本，即候选推荐标准），你不能…
我迟迟没有做出贡献，但是我很伤心看到没有人提出这个build议，如果你真的需要内联代码，这是可能的。 我需要一些hoverbutton，方法是这样的：
.hover-item { background-color: #FFF; } .hover-item:hover { background-color: inherit; }
<a style="background-color: red;"> <div class="hover-item"> Content </div> </a
1）使用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',''); };
2）Javascript中的多词风格：
element.style.fontSize="12px"
你不能完全描述你所描述的，因为a:hover是select器的一部分，而不是CSS规则。 样式表包含两个组件：
selector {rules}
内联样式只有规则; 该select器隐含为当前元素。
select器是一种expression性语言，它描述了一组与XML类文档中的元素相匹配的标准。
然而，你可以接近，因为一个style集在技术上可以去任何地方：
<html> <style> #uniqueid:hover {do:something;} </style> <a id="uniqueid">hello</a> </html>
内联伪类声明在CSS的当前迭代中不被支持（尽pipe从我的理解来看，它可能会在未来的版本中）。
现在，你最好的select就是直接在你想要的风格的上面定义一个风格块：
<style type="text/css"> .myLinkClass:hover {text-decoration:underline;} </style> <a href="/foo" class="myLinkClass">Foo!</a>
<style>a:hover { }</style> <a href="/">Go Home</a>
hover是一个伪类，因此不能使用样式属性。 它是select器的一部分。
根据你的意见，你反正发送一个JavaScript文件。 在JavaScript中进行翻转。 jQuery的$.hover()方法很容易，就像所有其他的JavaScript包装器一样。 直接的JavaScript也不难。
正如所指出的那样，您不能设置hover的任意内联样式，但是您可以在相应的标记中使用以下内容更改CSS中hover光标的样式 ：
style="cursor: pointer;"
没有办法做到这一点。 您的select是使用JavaScript或CSS块。
也许有一些JavaScript库将专有风格属性转换为风格块。 但是，那么代码将不符合标准。
我只是想出了一个不同的解决scheme。
我的问题：我有一些幻灯片/主要内容查看器以及脚注中的<a>标签<a>标签。 我希望他们能够在IE浏览器的相同位置，所以整个段落在下面都会加下划线，尽pipe它们不是链接：整个幻灯片是一个链接。 IE不知道区别。 我也有一些实际的链接在我的页脚，确实需要下线和颜色的变化。 我以为我不得不把样式与页脚标签内联，以使颜色改变，但从上面的build议表明，这是不可能的。
解决scheme：我给了页脚链接两个不同的类，我的问题解决了。 我可以在一个class上有onHover颜色变化，有幻灯片上没有颜色变化/下划线，同时还可以在页脚和幻灯片中有外部HREFS！
我同意影子 。 您可以使用onmouseover和onmouseout事件通过JavaScript更改CSS 。
而且不要说人们需要激活JavaScript。 这只是一个样式问题，所以没有JavaScript的访问者是没有关系的）;尽pipe大部分的Web 2.0都支持JavaScript。 看Facebook的例子（大量的JavaScript）或Myspace 。
我的问题是，我正在build立一个网站，使用大量的图像图标，hover时不同的图像必须交换（例如，蓝色图像在hover时变成红色）。 我为此制作了以下解决scheme：
.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>
只能使用伪类a:hover在外部样式表中。 因此我build议使用外部样式表。 代码是：
a:hover {color:#FF00FF;} /* Mouse-over link */
你可以通过添加一个类来做id，但是不能内联。
<style>.hover_pointer{cursor:pointer;}</style> <div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>
2行，但你可以在任何地方重新使用这个类。
