提问



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


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


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

最佳参考


简短回答:你不能。


答案很长:你不应该。


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


:hover是一个伪选择器,对于CSS,它只在样式表中有意义。没有任何内联式等价物(因为它不定义选择标准)。 [35]


回应OP的评论:


有关动态添加CSS规则的好脚本,请参阅使用Javascript 的完全Pwn CSS。另请参阅更改样式表以了解有关该主题的一些理论。[36] [37]


另外,请不要忘记,如果可以选择,您可以添加外部样式表的链接。例如,


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


注意:以上假设有一个头部。 [38]

其它参考1


您可以通过在onMouseOveronMouseOut参数中使用JavaScript更改样式来获得相同的效果,但如果您需要更改多个元素,则效率非常低:




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



更确切地说,你可以在过去的某个时刻做到这一点。但是现在(根据同一标准的最新修订版,即候选推荐标准),你不能
    ... [39]

其它参考2


我为此做出了非常晚的贡献,但是我很难过看到没有人建议这一点,如果你真的需要内联代码,这是可行的。我需要它用于一些悬停按钮,方法是这样的:




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

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

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



你不能完全按照你的描述进行描述,因为a:hover是选择器的一部分,而不是CSS规则。样式表有两个组成部分:


selector {rules}


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


选择器是一种富有表现力的语言,它描述了一组标准,以匹配类似XML的文档中的元素。


但是,你可以接近,因为style集在技术上可以在任何地方去:


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

其它参考3


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"

其它参考4


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


现在,您最好的选择可能只是在要设置样式的链接上方定义样式块:


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

其它参考5


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


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

其它参考6


根据你的评论,你无论如何都要发送一个JavaScript文件。在JavaScript中进行翻转.jQuery的$.hover()方法使其变得简单,每个其他JavaScript包装器也是如此。直接JavaScript也不太难。[40]

其它参考7


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


style="cursor: pointer;"

其它参考8


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


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

其它参考9


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


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


解决方案:我给了页脚链接两个不同的类,我的问题解决了。我能够在一个类中进行onHover颜色更改,让幻灯片onHover没有颜色变化/下划线,并且仍然可以在页脚和幻灯片中同时使用外部HREFS !

其它参考10


我同意 shadow 。您可以使用onmouseoveronmouseout事件通过JavaScript更改CSS。 [42]


并且不要说人们需要激活JavaScript。这只是一个样式问题,所以如果有一些访问者没有JavaScript就没关系;)
虽然大多数Web 2.0都适用于JavaScript。以Facebook为例(很多JavaScript)或Myspace。[43] [44] [45]

其它参考11


这是最好的代码示例:




<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电子邮件中使用JavaScript?例如,在我目前工作的公司(与Abodee押韵)中,我们对大多数电子邮件营销Activity使用最低的共同点 - 而JavaScript只是没有被使用。永远。除非你指的是某种预处理。


正如相关文章中提到的那样:Lotus Notes,Mozilla Thunderbird,Outlook Express和Windows Live Mail似乎都支持某种JavaScript执行。其他任何东西都没有。


链接到这篇文章的文章:[[http://en.wikipedia.org/wiki/Comparison_of_e-mail_clients]][46]


此外,如何将悬停转换为移动设备?这就是为什么我喜欢上面的答案:Long answer: you shouldn't.


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

其它参考12


我的问题是我正在建立一个网站,它使用大量的图像 - 图标必须在悬停时由不同的图像交换(例如,蓝色图像在悬停时变为红色)。
我为此制作了以下解决方案:




.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。因此,我建议使用外部样式表。代码是:


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

其它参考13


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


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


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