我怎么能写'a:悬停'在内联CSS?

我有一个情况下，我必须写内联CSS代码，我想应用悬停样式的锚。

我如何使用一个:悬停在内联CSS内的HTML样式属性?

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

当前回答

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

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

2009-06-23 15:10:57

其他回答

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

My issue: I have an <a> tag around some slides/main content viewer as well as <a> tags in the footer. I want them to go to the same place in IE, so the whole paragraph would be underlined onHover, even though they're not links: the slide as a whole is a link. IE doesn't know the difference. I also have some actual links in my footer that do need the underline and color change onHover. I thought I would have to put styles inline with the footer tags to make the color change, but advice from above suggests that this is impossible.

解决方案:我给了脚注链接两个不同的类，我的问题就解决了。我能够有onHover的颜色改变在一个类，有幻灯片onHover没有颜色变化/下划线，仍然能够有外部href在页脚和幻灯片在同一时间!

2011-09-08 16:57:22

所以这并不是用户想要的，但是我发现这个问题是在寻找答案，并且找到了一些相关的东西。我有一堆重复的元素，需要一个新的颜色/悬停在其中的标签。我使用句柄，这是我的解决方案的关键，但其他模板语言也可以工作。

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

<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

2018-12-06 22:15:52

简单的回答是:你不能。

长话短说:你不应该。

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

:hover是一个伪选择器，对于CSS来说，它只在样式表中有意义。没有任何内联样式的对等物(因为它没有定义选择标准)。

回应行政长官的评论:

关于动态添加CSS规则的好脚本，请参阅完全Pwn CSS with Javascript。关于这个主题的一些理论，请参见Change样式表。

另外，不要忘记，如果可以的话，还可以添加到外部样式表的链接。例如,

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

注意:以上假设有一个头部部分。

2009-06-23 15:09:04

使用JavaScript:

a)增加内联样式

document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');

B)或者更难一点的方法——添加“鼠标悬停”

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"

2013-07-22 08:33:46

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

selector {rules}

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

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

然而，你可以接近，因为从技术上讲，一个风格集几乎可以去任何地方:

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

2009-06-23 15:10:13

我怎么能写'a:悬停'在内联CSS?

推荐文章

最新文章

标签