如何在CSS中使用“hover”

我使用下面的代码来实现这个目标:

当鼠标hover在锚上,下划线出来,

但它失败了,

<a class="hover">click</a> a .hover :hover{ text-decoration:underline; } 

什么是正确的版本来做到这一点?

9 Solutions collect form web for “如何在CSS中使用“hover””

如果您希望鼠标在链接上hover时出现下划线,则:

 a:hover {text-decoration: underline; } 

是足够的,但是如果你愿意的话,你也可以使用“hover”的类名,下面的内容同样适用:

 a.hover:hover {text-decoration: underline; } 

顺便提一下,值得指出的是,'hover'这个类的名字并没有真正添加任何元素,因为a:hovera.hover:hover元素和a.hover:hover 。 除非这只是使用类名的演示。

有很多方法可以做到这一点。 如果你真的想在你的A元素中有一个“hover”类,那么你必须这样做:

 a.hover:hover { code here } 

然后再次,有这样一个类名不常见,这是你如何做一个常规的hover:

 select:hover { code here } 

这里有几个例子:

1

HTML:

 <a class="button" href="#" title="">Click me</a> 

CSS:

 .button:hover { code here } 

2

HTML:

 <h1>Welcome</h1> 

CSS:

 h1:hover { code here } 

:hover是许多伪类之一。

例如,你可以改变,当鼠标hover在它上面时,你可以控制一个元素的样式,当它被点击时以及之前被点击时。

HTML:

 <a class="home" href="#" title="Go back">Go home!</a> 

CSS:

 .home { color: red; } .home:hover { color: green; } .home:active { color: blue; } .home:visited { color: black; } 

除了我给出的尴尬颜色作为例子,与“家”类的链接默认为红色,鼠标hover时为绿色,点击时为蓝色,点击后为黑色。

希望这可以帮助

不是一个答案,但解释为什么你的CSS不匹配的HTML。

在CSS空间被用作分隔符告诉浏览器在儿童看,所以你的CSS

 a .hover :hover{ text-decoration:underline; } 

的意思是“寻找一个元素,然后寻找任何有hover类的子孙,看看那些有hover状态的后代的任何后代”,并匹配这个标记

 <a> <span class="hover"> <span> I will become underlined when you hover on me <span/> </span> </a> 

如果你想匹配a.hover:hover a class="hover">I will become underlined when you hover on me</a>你应该使用a.hover:hover ,这意味着“寻找任何一个带有类hover和hover状态的元素“

a.hover:hover

 a.hover:hover { text-decoration:underline; } 

您需要连接select器和伪select器。 你还需要一个样式元素来包含你的样式。 大多数人使用外部样式表来获得很多好处(caching一个)。

 <a class="hover">click</a> <style type="text/css"> a.hover:hover { text-decoration: underline; } </style> 

只是一个注意:hover类是没有必要的,除非你只定义某些链接有这种行为(可能是这种情况)

href是一个锚元素的必需属性,所以没有它,你不能期望所有的浏览器都能够平等地处理它。 无论如何,我在某个地方看了一个评论,你只希望链接在hover时加下划线,否则就不要。 您可以使用以下来实现这一点,它只适用于与hover类的链接:

 <a class="hover" href="">click</a> a.hover { text-decoration: none; } a.hover:hover { text-decoration:underline; } 

你应该使用:

 a:hover { text-decoration: underline; } 

hover在CSS中是一个伪类。 无需分配class级。

上次我正在研究一个不错的缺陷,并且想知道更多关于如何正确使用hover属性的A标签链接和IE浏览器。 一个奇怪的事情是,IE浏览器无法捕获基于简单的Aselect器的A标签链接元素。 所以,我发现如何甚至强制捕获一个标签元素,我发现我们必须使用更多的特定CSSselect器。 下面是一个例子 – 它完美的作品:

 li a[href]:hover {...} 
  • 如何防止触摸设备上的button粘滞hover效果
  • 内联元素在hover时变为粗体
  • divhover背景颜色的变化?
  • 如何在支持触摸的浏览器中使用触摸模拟hover?
  • 如何更改WPF中的buttonMouseOver的背景?
  • 在移动浏览器上禁用hover效果
  • 有什么办法可以将鼠标hover在一个元素上并影响不同的元素?
  • 添加hover文本没有JavaScript像我们hover在用户的声誉
  • iPad / iPhone盘旋问题导致用户双击链接
  • 如何告诉.hover()等待?
  • Angular 2hover事件