我有一个情况下,我必须写内联CSS代码,我想应用悬停样式的锚。
我如何使用一个:悬停在内联CSS内的HTML样式属性?
例如,你不能可靠地在HTML电子邮件中使用CSS类。
我有一个情况下,我必须写内联CSS代码,我想应用悬停样式的锚。
我如何使用一个:悬停在内联CSS内的HTML样式属性?
例如,你不能可靠地在HTML电子邮件中使用CSS类。
当前回答
在当前的CSS迭代中不支持内联伪类声明(不过,据我所知,在未来的版本中可能会支持)。
现在,你最好的办法可能是直接在你想要样式的链接上方定义一个样式块:
<style type="text/css">
.myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
其他回答
你可以做到的。但不是内联样式。你可以使用onmouseover和onmouseout事件:
<div style="background: #333;填充:10 px;光标:指针” onmouseover = " this.style.backgroundColor =“# 555”;“onmouseout = " this.style.backgroundColor =“# 333”;" > 在我身上盘旋! < / div >
这是不可能的。您可以选择使用JavaScript或CSS块。
也许有一些JavaScript库可以将私有样式属性转换为样式块。但是这样代码就不符合标准了。
在当前的CSS迭代中不支持内联伪类声明(不过,据我所知,在未来的版本中可能会支持)。
现在,你最好的办法可能是直接在你想要样式的链接上方定义一个样式块:
<style type="text/css">
.myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
我的问题是,我正在建立一个网站,使用大量的图像图标,必须由不同的图像悬停交换(例如,蓝色的图像变成红色的悬停)。 对此,我提出了以下解决方案:
.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>
我引入了一个包含这对图像的容器。第一个是可见的,另一个是隐藏的(display:none)。当悬停容器时,第一个容器将被隐藏(display:none),第二个容器将再次显示(display:block)。
我同意影子的说法。您可以使用onmouseover和onmouseout事件通过JavaScript更改CSS。
不要说人们需要激活JavaScript。这只是一个风格问题,所以如果有一些访问者没有JavaScript也没关系;) 尽管大多数Web 2.0都使用JavaScript。例如Facebook(大量JavaScript)或Myspace。