我的鏈接圖像有我想通過編碼去除的隱形像素

當您將鼠標懸停在實際圖像上方時，圖像鏈接顯示爲「隱形像素」。有什麼辦法可以刪除它們嗎？這裏是我的代碼：我的鏈接圖像有我想通過編碼去除的隱形像素

<div id="sidebar"> 
    <div id="navbuttonbox"> 

     <a href="Movies.php"><img src="img/test.png"/></a> 

    </div> 
</div><!--sidebar-->

對於我的風格用

#navbuttonbox { 
    margin-left: 37px; 
}

所以，這將是正確的，我想它。

我展示了它的jsfiddle https://jsfiddle.net/1g2pqwy2/1/

當您移動鼠標在圖像上方一點點，你仍然可以得到一個光標鏈接，因爲圖像的尾部是高於身體。

來源

2015-07-03 Igor Tomic

OK，這裏是一個快速的嘗試 - '#navbuttonbox IMG {顯示：塊;}' ，看看是否有幫助。 – Stickers

歡迎來到Stack Overflow！尋求調試幫助的問題（「爲什麼不是這個代碼工作？」）必須包括所需的行爲，特定的問題或錯誤以及在問題本身**中重現**的最短代碼。請參閱[**如何創建最小，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve） –

不，您不能檢測鼠標光標何時位於圖像的透明部分上。。如果那是你的意思 – zgood

首先這裏是你的HTML。

<div id="sidebar"> 
    <div id="navbuttonbox"> 
     <a href="Movies.php"><img src="img/test.png"></a> 
    </div> 
</div>

試試這個：

HTML

<div id="sidebar"> 
    <div class="navbuttonbox"> 
    <a href="Movies.php">Movies</a> 
    </div> 
    <div class="navbuttonbox"> 
    <a href="OTHER.PHP">OTHER</a> 
    </div> <!--- KEEP REPEATING FOR EACH MENU ITEM //--> 
</div>

CSS

.navbuttonbox { 
    position:relative; 
    background: url(/img/test.png); 
    background-repeat: no-repeat; 
    min-height: 40px; 
    padding-top: 10px; 
    margin-right: -38px; 
} 

.navbuttonbox > a { 
    display:block; 
    padding:10px; 
}

你會發現鏈接下移那些看不見的像素。尾部也得以固定，如果你需要它：

.navbuttonbox > a:before { 
    content:''; 
    width:38px; 
    top:-10px; 
    bottom:0; 
    right:0; 
    position:absolute; 
}

爲了證明我成立了一個的jsfiddle：here

來源

2015-07-03 22:19:55 MiltoxBeyond

我的鏈接圖像有我想通過編碼去除的隱形像素

回答

相關問題