我的链接图像有我想通过编码去除的隐形像素

当您将鼠标悬停在实际图像上方时，图像链接显示为“隐形像素”。有什么办法可以删除它们吗？这里是我的代码：我的链接图像有我想通过编码去除的隐形像素

<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

我的链接图像有我想通过编码去除的隐形像素

回答

相关问题