CSS HTML行出现在div：active [英] CSS HTML line appearing on div :active

问题描述

好，我有一系列div设置为导航栏图片，突出显示并点击后变为活动状态：

OK, I had a series of divs set up to work as navigation bar images that would highlight and become active on upon click:

<td><div class="navbright"><a href="http://www.x.com"><img src="/images/Home.jpg" alt="" width="200"></a></div></td>
<td><div class="navbright"><a href="http://www.x.com/Articles.html"><img src="/images/Articles.jpg" alt="" width="200"></a></div</td>
<td><div class="navbright"><a href="http://www.x.com/Forum.html"><img src="/images/Forum.jpg" alt="" width="200"></a></div></td>
<td><div class="navbright"><a href="http://www.x.com/Store.html"><img src="/images/Store.jpg" alt="" width="200"></a></div></td>
<td><div class="navbright"><a href="http://www.x.com/Contact.html"><img src="/images/Contact.jpg" alt="" width="200"></div></a></td>

我将我的css设置为：

I set my css up as:

.navbright {
  background-color: #FFC39A;
  display: block;
  outline:none;
}
.navbright img:hover {
  opacity: .6;
}

.navbright img:active {
  opacity: .3;
}

一切正常。然后我从清除我的主要编码：

Everything was working fine. I then "cleaned up" my main coding from:

 <table align="center" bgcolor="#2c2828" border="0"
 cellpadding="0" cellspacing="0" width="1000">
<tbody>
<tr>
  <td class="IndexMainBody" valign="top">
  <table align="center">
    <tbody>
      <tr>
        <td
 style="padding-top: 10px; padding-left: 10px; padding-right:10px;"><!-- end header-->
        <p align="center"><big><big><big><span style="color: rgb(255, 0, 0);"><strong>text</P>         
        </td>
      </tr>
    </tbody>
  </table>
  </td>
</tr>

<table align="center" bgcolor="#2c2828" border="0" cellpadding="0" 
cellspacing="0" width="1000">
<tr>
<td><hr>            
    <P align="center">text</P>                  
</td>
</tr>
</table>

注意我添加了一个水平规则。好吧，现在这些烦人的红线，每个div图像链接的左边框上方和下方几个像素的扩展将显示每次他们点击使用：活动。我甚至尝试恢复到旧的代码，他们不会消失。有人请帮助我;

Notice I added a horizontal rule. Ok, now these annoying red lines a extending a few pixels above and below the left border of every div image link would show up everytime they were clicked using :active. I even tried reverting back to the old code and they do not disappear. Someone please help me out; it's driving me crazy.

推荐答案

这应该将您的所有链接选项设置为无装饰

This should set all of your link option to no decoration

<style>
a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

</style>

<td><div class="navbright" style="border:none"><a href="http://www.x.com"><img src="/images/Home.jpg" alt="" width="200" style="border:none"></a></div></td>

这篇关于CSS HTML行出现在div：active的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！