为什么包含链接的图片和文字会一直移动

Question

包含链接的所有图片和文字都碰巧在鼠标上移动。我检查了我的CSS并尝试了一些解决方案，如下所示仍然无法正常工作：

1. 添加填充
2. 添加职位：亲属

我的页面是http://www.ttc.edu.my/welcome

.highlight-box {
  position: relative;
  text-align: center;
  color: white;
  padding: 0px;
  margin-bottom: -10px;
}

.highlight-box h3 {
  color: white;
  text-decoration: none;
}

.highlight-box h1 {
  color: white;
  text-decoration: none;
}

.highlight-box h6 {
  color: white;
  text-decoration: none;
}

.highlight-box p {
  color: white;
  text-decoration: none;
}

.highlight-box a:hover {
  color: white;
  text-decoration: none;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="highlight-box col-md-6">
  <div class="highlight-box">
    <span><a href="http://www.ttc.edu.my/course/engineering"><br /><img src="Untitled-1_01.jpg"></p>
<div class="centered">
<h3>Skills Diplomas</h3>
<p>Click for More Info</p>
<p></a></span></div>
</div>

Answer 1

问题是你的HTML有可怕的无效标记。更正它可以解决问题。请务必使用 W3C validation service 验证您的标记。

这是我正在寻找的相信的标记
（添加黑色背景以显示白色字体）：

body {
  background: black;
}

.highlight-box {
  position: relative;
  text-align: center;
  color: white;
  padding: 0px;
  margin-bottom: -10px;
}

.highlight-box h3 {
  color: white;
  text-decoration: none;
}

.highlight-box h1 {
  color: white;
  text-decoration: none;
}

.highlight-box h6 {
  color: white;
  text-decoration: none;
}

.highlight-box p {
  color: white;
  text-decoration: none;
}

.highlight-box a:hover {
  color: white;
  text-decoration: none;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="highlight-box col-md-6">
  <div class="highlight-box">
    <img src="Untitled-1_01.jpg" />
    <div class="centered">
      <h3>Skills Diplomas</h3>
      <p>
        <a href="http://www.ttc.edu.my/course/engineering">Click for More Info</a>
      </p>
    </div>
  </div>
</div>

您还可能在position: fixed上寻找position: absolute而不是.centered，以便元素实际位于页面的中心（而不是关闭它）。

希望这有帮助！ ：）

Answer 2

似乎问题与边境属性有关。试试吧。

#megaMenu #megaST li.menu-item-depth-0 a.link-depth-0:link, #megaMenu li.menu-item-depth-0 a.link-depth-0:visited{
           padding: 7px 15px 7px 15px;
           border: none;
    }