html圖片鏈接懸停在圖片下方顯示錨點框

將圖片用作鏈接時遇到麻煩。問題是，當鼠標懸停在圖像上的邊框突出顯示，但也有一個額外的框突出顯示在圖像的底部，我認爲這是firefox元素檢查器顯示爲錨點的圖像寬度和高度行高。我如何擺脫這個額外的盒子或它是什麼？html圖片鏈接懸停在圖片下方顯示錨點框

感謝

的HTML是

<div class="linkbox"> 
<a href="gardenbirds.html" 
<img src="pics-links/dnc23011.jpg"title="Garden birds" 
alt="Garden birds"class="linkpic"><a/><br> 
<a href="gardenbirds.html">&nbsp;Garden birds&nbsp;<a/> 
</div>

的CSS是

.linkbox { 
    text-align: center; 
    float: left; 
    font-family: Arial,Helvetica,sans-serif; 
    font-style: normal; 
    text-transform: none; 
    width: 170px; 
    height: 175px; 
    font-weight: bold; 
    line-height: 20px; 
    font-size: 10pt; 
    } 
    .linkpic { 
    border: 1px solid white; 
    } 
    a:link { 
    font-weight: bold; 
    font-family: Arial,Helvetica,sans-serif; 
    color: #46484e; 
    text-decoration: none; 
    } 
    a:visited { 
    font-family: Arial,Helvetica,sans-serif; 
    font-weight: bold; 
    color: #64666c; 
    text-decoration: none; 
    } 
    a:hover { 
    background-color: white; 
    text-decoration: none; 
    } 
    a:hover img { 
    border: 1px solid #46484e; 
    }

所以圖像是一個鏈接和文本是一個鏈接。文本懸停白色，圖像邊界盤旋黑色。所有工程確定在Firefox，但在IE它顯示的圖像和文字

來源

2015-04-28 Uncoded

提供的HTML代碼 –

可能是圖像不顯示'：block' ... –

如果是CSS ，只需設置text-decoration：none;如果是圖片html元素，只需在您的鏈接上添加border =「0」 –

之間的超白懸停區在你的鏈接，應用此CSS：

a img { 
    border: none; 
}

來源

2015-04-28 11:33:07 Joanvo

-1

以上都不似乎工作。造成額外的高亮區域的代碼似乎是

a:hover { 
background-color: white; 
text-decoration: none; 
}

作用於圖像錨

來源

2015-04-28 13:38:45 Uncoded

html圖片鏈接懸停在圖片下方顯示錨點框

回答

相關問題