我的 link 图片有我想通过编码删除的不可见像素

Question

我的图像 link 有 "invisible pixels"，当您将鼠标悬停在实际图像上方时，它显示为 link。有什么办法可以去除它们吗？这是我的代码：

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

当您将鼠标移动到图像上方一点点时，您仍然会看到一个光标 link，因为图像的尾部比主体高。

Answer 1

首先是您的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;
}

您会注意到那些不可见像素的 link 向下移动。如果您需要尾巴也可以固定：

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

为了演示，我设置了一个 JSFiddle：here

我的 link 图片有我想通过编码删除的不可见像素

My link image has invisible pixels that I want to remove via coding

css

php

image

button

hyperlink