-2

我一直在尝试将图像悬停更改为另一张图片。我发现的还没有为我工作。这是我的 HTML

<div id="navbar">
    <table style="margin-left: auto; margin-right: auto;">
        <tr>
            <td><a href="index.html"><div id="navbar_button" style="background-image: url(images/navbar_home.png); width: 213px;"></div></a></td>
            <td><a href="play.html"><div id="navbar_button" style="background-image: url(images/navbar_playnow.png); width: 213px;"></div></a></td>
            <td><a href="home/index.php"><div id="navbar_button" style="background-image: url(images/navbar_forum.png); width: 213px;"></div></a></td>
            <td><a href="highscores.php"><div id="navbar_button" style="background-image: url(images/navbar_highscores.png); width: 213px;"></div></a></td>
        </tr>
    </table>
</div>

和我的 CSS

#navbar {
    background-image: url(../images/navbar_bg.png);
    height: 88px;
    width: 100%;
    margin:0;
    padding:0;
    position:absolute;
    top:0;
    left:0;
}
#navbar_button {
    height: 88px;
}
#navbar_button:hover {
    opacity:0.9;
    filter:alpha(opacity=90);
}
4

4 回答 4

2

不应为多个元素使用相同的 ID。ID 是唯一标识符，应该是唯一的，这是你的问题。

所以你需要把它改成class而不是ID：

.navbar_button {
    height: 88px; 
    width: 213px;
} 
.navbar_button:hover { 
    opacity:0.9; 
    filter:alpha(opacity=90); 
}

<div id="navbar"> 
    <table style="margin-left: auto; margin-right: auto;"> 
        <tr> 
            <td><a href="index.html"><div class="navbar_button" style="background-image: url(images/navbar_home.png);"></div></a></td> 
            <td><a href="play.html"><div class="navbar_button" style="background-image: url(images/navbar_playnow.png);"></div></a></td> 
            <td><a href="home/index.php"><div class="navbar_button" style="background-image: url(images/navbar_forum.png);"></div></a></td> 
            <td><a href="highscores.php"><div class="navbar_button" style="background-image: url(images/navbar_highscores.png);"></div></a></td> 
        </tr> 
    </table> 
</div>

但是有了这个，你不能在悬停时更改图像，对于图像更改，你需要使用 ID 并给每个 div 另一个图像 + ID：

.navbar_button {
    height: 88px; 
} 
#navbar_button1:hover { 
    background-image: url(whatever1.png);
}
#navbar_button2:hover { 
    background-image: url(whatever2.png);
}

<div id="navbar"> 
    <table style="margin-left: auto; margin-right: auto;"> 
        <tr> 
            <td><a href="index.html"><div class="navbar_button" id="navbar_button1" style="background-image: url(images/navbar_home.png); width: 213px;"></div></a></td> 
            <td><a href="play.html"><div class="navbar_button" id="navbar_button2" style="background-image: url(images/navbar_playnow.png); width: 213px;"></div></a></td> 
        </tr> 
    </table> 
</div>

另一个技巧：将解决方案一与类一起使用，并使用一个具有正常和悬停状态（平铺）的图像（左侧为正常状态，右侧为悬停图像）。不仅仅是写在你的CSS中：

.navbar_button {
    background-repeat: no-repeat;
    background-position:right;
    height: 88px; 
    width: 213px;
} 
.navbar_button:hover {
    background-position:left;
    opacity:0.9; 
    filter:alpha(opacity=90); 
}
  1. 你在图片上的图片必须与容器的高度和宽度相匹配，否则看起来不好看。
  2. 您对图像的负载更大，因为它们的文件大小更大
  3. 但是您不需要在悬停时加载图像，并且在较慢的服务器/浏览器/带宽上没有闪烁
  4. 有了这个，您不需要为 CSS 中的每个图像编写 ID。
于 2012-07-12T06:32:57.730 回答
0

它奏效了。可以在这里找到。

请检查图片的网址，您是否故意设置为 0.9 alpha？

于 2012-07-12T06:34:27.637 回答
0

ID 是唯一标识符。您应该使用不同的 id 更改您的 id 并尝试以下操作：

.image-hover {
   display:block; /* if u need */
   background-image:url(http://first_image_url.jpg);
   width:100px; /* as your wish */
   height:100px; /* as your wish */
}
.image-hover:hover {
   background-image:url(http://second_image_url.jpg);
}

或使用 javascriptmouseover和mouseout

于 2012-07-12T06:41:34.863 回答
0

像这样修改你的代码

<td><div class="navbar_button" style="background-image: url(images/navbar_home.png); width: 213px;"><a href="index.html"></a></div></td>

并在 css: 中像这样修改，

div.navbar_button a:hover {
opacity:0.9;
filter:alpha(opacity=90);
}

ID是唯一的..你不能重复它..所以我使用类而不是id..试试这个..希望这会有所帮助。

于 2012-07-12T06:37:37.657 回答