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

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

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


当前回答

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

现在,你最好的办法可能是直接在你想要样式的链接上方定义一个样式块:

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

其他回答

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

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

正如所指出的,你不能为悬停设置任意的内联样式,但你可以在CSS中使用以下方法在适当的标签中更改悬停光标的样式:

style="cursor: pointer;"

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

我定义了一些颜色,并将它们传递到每个元素的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

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

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在页脚和幻灯片在同一时间!

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

首先我可以这样写

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中尝试hover:

JavaScript

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