Question

我一直试图将图像悬停在另一张图片上。我发现的东西对我来说还没有用。这是我的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);
}

Answer 1

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

因此您需要将其更改为类而不是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); 
}

图像上的图像必须与容器的高度和宽度相匹配，否则看起来不太好。
您对图片的负载更大，因为它们在文件大小方面更大
但是您不需要在悬停时加载图像，并且在较慢的服务器/浏览器/带宽上没有闪烁
使用此功能，您无需为CSS内的每个图像编写ID。

Answer 2

这很有用。可以找到here。

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

Answer 3

像这样修改你的代码

<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 ..试试这个..希望这有帮助。

Answer 4

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);
}

或使用javascript mouseover和mouseout

html-css改变img悬停

4 个答案: