Question

我的图片链接有＆＃34;不可见像素＆＃34;当您将鼠标悬停在实际图像上方时，它会显示为链接。有没有办法删除它们？这是我的代码：

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

当您将鼠标移动到图像上方时，您仍然可以获得光标链接，因为图像的尾部高于身体。

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

您会注意到这些不可见像素的链接已向下移动。如果需要，尾部也可以固定：

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

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

我的链接图像包含我想通过编码删除的不可见像素

1 个答案: