Question

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

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

请帮帮我。

Answer 1

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

但javascript，jquery等有很多种可能性，可以让你在每个浏览器中使用它。

Answer 2

您需要使用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将您在IMAGE PATH GOES中指定的任何图像放置为该元素的背景。：hover伪选择器允许您在用户用鼠标悬停图像时更改图像。在这种情况下，我们提供了一个不同的图像路径，可以在li悬停时有效地改变图像。

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

Answer 3

不确定我是否理解但如果我这样做是这样的：

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

或

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

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

HTML CSS悬停按钮导航

3 个答案: