1

画像と一連のリンクがあります。ホバーはテキストリンクで意図したとおりに機能しますが、クロムとサファリで画像に配置すると、全体ではなく画像の一部の背景色のみが変更されます...私は本当に理解していません. SOで言及されている他のツールと同様にjsfiddleを試しました。なぜこれが起こっているのか知っているなら、以下のコードを見てください:

<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 に答える