CSS图像悬停链接答案

【问题标题】：css image hover linkCSS图像悬停链接
【发布时间】：2012-06-16 07:25:48
【问题描述】：

我有一张图片，然后是一系列链接。悬停在文本链接上按预期工作，但是当我将它放在图像上时，在 chrome 和 safari 中它只会改变图像一部分的背景颜色，而不是整个图像......我真的不明白。我尝试了 jsfiddle 以及 SO 中提到的其他一些工具，如果您知道为什么会这样，请查看下面的代码：

<html>
<head>
  <title>Welcome!</title>
  <style type="text/css">
    #header {
        background-color:#2C2C2C;
        height:88px;
        width:100%;
        margin: 0px auto 0 auto;
    }
    #header_logo_link {
        float: left;
        width: 250px;
    }
    #header_logo_link img {
        padding-right: 15px;
        padding-left: 15px;
        padding-top: 15px;
        padding-bottom: 10px;
        background: transparent;
    }
    #header_logo_link :hover {
        background-color: #4d4d4d;
    }
    body, .wrapper {
        min-height: 100%;
        overflow: hidden;

        margin: 0;
        padding: 0;
        min-height: 100%;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div id="header">
        <div id="header_logo_link">
            <a href="/"><img src="logo.png"></a>
        </div>
        <div id="header_logo_link">
            <a href="/home">Home</a>
        </div>
    </div>
  </div>
</body>
</html>

【问题讨论】：

你到底想做什么？你不能改变图像的颜色？你想改变图像周围的颜色吗？
问题是悬停没有覆盖整个图像..只是它的一部分。当我将鼠标悬停在文本上时，它很好。此问题仅适用于 chrome 和 safari。
您是否正在尝试实现这样的目标：jsfiddle.net/ninty9notout/n2SHh 如果您是，那么我可以解释更多关于我在这里所做的事情。
是的！这正是我想要实现的。
如果您将其作为答案，我会将其标记为解决方案。

标签： html internet-explorer firefox google-chrome css

【解决方案1】：

我不确定您要问什么，但如果您想在图像翻转时更改图像周围的颜色，请尝试在 a 元素和 display:block 中添加一些填充。

<html>
<head>
  <title>Welcome!</title>
  <style type="text/css">
    #header {
        background-color:#2C2C2C;
        height:88px;
        width:100%;
        margin: 0px auto 0 auto;
    }
    #header_logo_link {
        float: left;
        width: 250px;
    }
    #header_logo_link img {
        padding-right: 15px;
        padding-left: 15px;
        padding-top: 15px;
        padding-bottom: 10px;
        background: transparent;
    }
    #header_logo_link :hover {
        background-color: #4d4d4d;
    }
    body, .wrapper {
        min-height: 100%;
        overflow: hidden;

        margin: 0;
        padding: 0;
        min-height: 100%;
    }
    a.img_rollover{
        padding:5px;
        display:block;
    }
    a.img_rollover:hover{
        background-color: #00F; /*This is your new rollover color*/
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div id="header">
        <div id="header_logo_link" class="img_rollover">
            <a href="/"><img src="logo.png"></a>
        </div>
        <div id="header_logo_link">
            <a href="/home">Home</a>
        </div>
    </div>
  </div>
</body>
</html>

【讨论】：

抱歉，遇到了同样的问题。悬停背景变化未完全覆盖图像。
你说得对，上面的代码没有覆盖整个图像。您可以尝试创建一个覆盖图像的 div，将其相对于图像定位，并在滚动时显示，不显示时隐藏。