css圖像懸停鏈接

我有一個圖像，然後一系列的鏈接。懸停在文本鏈接上按照預期工作，但是當我將它放在圖像上時，在Chrome和Safari中，它只改變圖像的一部分的背景顏色，而不是整個東西......我真的不明白。我試過的jsfiddle以及一些對SO提到的其他工具，請看看下面的代碼，如果你知道爲什麼發生這種情況：css圖像懸停鏈接

<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>

來源

2012-06-15 KVISH

你究竟想要做什麼？你不能改變圖像的顏色？你想改變圖像周圍的顏色嗎？ – alecwhardy

問題是，懸停不覆蓋整個圖像..只是它的一部分。當我在文字上懸停時，它很好。此問題僅適用於Chrome和Safari。 – KVISH

你是否想要實現這樣的目標：http://jsfiddle.net/ninty9notout/n2SHh/如果你是那麼我可以解釋更多關於我在這裏做了什麼。 – ninty9notout

我不完全相信你問什麼，但如果您試圖在圖像翻轉時改變圖像周圍的顏色，嘗試向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>

來源

2012-06-15 23:25:48 alecwhardy

對不起，這遇到了同樣的問題。懸停後的地面變化沒有完全覆蓋圖像。 – KVISH

你的正確，上面的代碼不覆蓋整個圖像。您可以嘗試創建一個覆蓋圖像的div，將其相對於它放置，並且當它翻轉時顯示，當不顯示時隱藏。 – alecwhardy

css圖像懸停鏈接

回答

相關問題