1

我有一张图片，然后是一系列链接。悬停在文本链接上按预期工作，但是当我将它放在图像上时，在 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>
4

1 回答 1

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>
于 2012-06-15T23:25:48.930 回答