Question

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

Answer 1

我不确定你在问什么，但是如果你试图在图像翻转时改变颜色，尝试在a元素中添加一些填充并显示：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>

css图像悬停链接

1 个答案: