我有一个情况下,我必须写内联CSS代码,我想应用悬停样式的锚。
我如何使用一个:悬停在内联CSS内的HTML样式属性?
例如,你不能可靠地在HTML电子邮件中使用CSS类。
我有一个情况下,我必须写内联CSS代码,我想应用悬停样式的锚。
我如何使用一个:悬停在内联CSS内的HTML样式属性?
例如,你不能可靠地在HTML电子邮件中使用CSS类。
当前回答
使用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"
其他回答
我同意影子的说法。您可以使用onmouseover和onmouseout事件通过JavaScript更改CSS。
不要说人们需要激活JavaScript。这只是一个风格问题,所以如果有一些访问者没有JavaScript也没关系;) 尽管大多数Web 2.0都使用JavaScript。例如Facebook(大量JavaScript)或Myspace。
根据您的注释,您发送的是一个JavaScript文件。用JavaScript进行翻转。jQuery的$.hover()方法使它变得很容易,就像所有其他JavaScript包装器一样。这在JavaScript中也不是很难。
可以通过添加类来实现id,但不能内联。
<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>
它只有两行,但是您可以在任何地方重用该类。
我只是想出了一个不同的解决方案。
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在页脚和幻灯片在同一时间!
在当前的CSS迭代中不支持内联伪类声明(不过,据我所知,在未来的版本中可能会支持)。
现在,你最好的办法可能是直接在你想要样式的链接上方定义一个样式块:
<style type="text/css">
.myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>