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

我的问题是，我正在建立一个网站，使用大量的图像图标，必须由不同的图像悬停交换(例如，蓝色的图像变成红色的悬停)。对此，我提出了以下解决方案:

.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)。

2016-08-29 19:05:09

我的问题是，我正在建立一个网站，使用大量的图像图标，必须由不同的图像悬停交换(例如，蓝色的图像变成红色的悬停)。对此，我提出了以下解决方案:

.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)。

2016-08-29 19:05:09

如果您确实需要内联代码，则可以这样做。我需要它的一些悬停按钮，方法是这样的:

.hover-item { background - color: # FFF; ｝ .hover-item:{徘徊 background - color:继承; ｝ <a style="background-color: red;"> < div class = " hover-item”> 内容 < / div > < /

在本例中，内联代码:"background-color: red;"是悬停时的开关颜色。用你需要的颜色，然后这个解决方案。我意识到，就兼容性而言，这可能不是完美的解决方案，但如果绝对需要，这是可行的。

2015-08-10 09:41:09

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

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

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

2009-06-23 15:11:18

可以通过添加类来实现id，但不能内联。

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

它只有两行，但是您可以在任何地方重用该类。

2014-08-04 19:47:27

你不能完全按照你描述的去做，因为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?

推荐文章

最新文章

标签