リンクが付いている画像とテキストがホバー上を移動し続ける理由

Question

リンクを含むすべての画像とテキストがマウスオーバーして移動していました。 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>

ある上

マイページ相対：

1. は、追加位置をパディング追加
2. ：まだ動作していない、それ以下のように私は私のCSSにチェックして、いくつかの解決策を試してみました

Answer 1

の問題は、国境のプロパティに関連しているようです。だからこれを試してください。

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

Answer 2

問題はあなたの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>

あなたはさらに、おそらく探していますの代わりに.centeredの代わりにposition: fixedを使用して、要素が実際にページの中央にある（オフにならない）ようにします。

希望すると便利です。 :)