HTML CSS悬停按钮导航

我正在使用图像按钮进行导航，因为我想要悬停效果。我的意思是，我使用的是按钮图像而不是<ul>标签或<div>标签，因为我需要悬停效果，这意味着当我将鼠标悬停在图像上时，图像会发生变化。这就是为什么我使用图像按钮。HTML CSS悬停按钮导航

但是，我不想使用图像。我想使用<ul>标记和<div>标记，但我不熟悉如何对这些标记执行悬停效果。

请帮帮我。

来源

2010-09-08 Gitesh Dang

如果您打算为新用户投票，至少告诉他们为什么。 – 2010-09-08 14:01:52

您需要使用CSS才能做到这一点。如果你想有一个按钮列表，那么我强烈建议你使用ul父元素，然后使用li子元素。不要在ul中使用div。您在图像路径指定的任何图像

<ul> 
    <li id='button1'>Button 1</li> 
    <li id='button2'>Button 2</li> 
</ul> 

#button1 {background-image: url(IMAGE PATH GOES HERE)} 
#button1:hover {background-image: url(HOVER IMAGE PATH GOES HERE)}

CSS属性background-image地方GOES HERE为背景的该元素。：悬停伪选择器允许您在用户使用鼠标悬停图像时更改图像。在这种情况下，我们提供了一个不同的图像路径，在li被徘徊时有效地改变图像。

如果你不熟悉CSS，you can learn more about it here。

来源

2010-09-08 14:00:09

感谢这个答案，但我不想使用图像...在这种情况下，我如何实现此代码... – 2010-09-08 14:04:12

@giteshdang你试图在悬停上创建什么样的效果？实质上，您只需要将背景图像更改为您尝试更改的任何属性。我不能告诉你哪一个人不知道你想要创造什么效果。如果你告诉我效果，我会试着指出你朝着正确的方向。 – 2010-09-08 14:08:34

actualy在一些网站，当我们将指针悬停在导航按钮上有一个按钮的背景上的变化..我想知道那是图像或div ..？ – 2010-09-08 14:24:08

所有现代浏览器都可以在每个元素上渲染:hover CSS选择器。您只需更改<ul>标签的background-image属性即可。

但有很多可能性与JavaScript，jquery等，这将使您可以在每个浏览器中使用它。

来源

2010-09-08 13:52:22 jolt

非常感谢汤姆 – 2010-09-08 14:02:11

不知道如果我理解，但如果我这样做是这样的：

ul:hover 
{ 
background-color: #f00; 
}

或

div:hover 
{ 
background-color: #f00; 
}

一样好一个答案，我可以给考虑的问题。

来源

2010-09-08 13:52:46 Kyle

HTML CSS悬停按钮导航

回答

相关问题