Removing underline from link

2018-06-26 16:19:19

I have the following code :

<html>
<head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>
        .nodecor 
        {
            text-decoration: none;
        }

        .strowb1 
        { 
            width: 150px; 
            height: 35px; 
            background-color: #1F375F; 
            text-align: center; 
            color: #999999; 
            font-family: calibri; 
            font-weight: bold; 
            font-size: 110%; 
            display: block; 
        }
        .fullcell 
        { 
            height: 100%; 
            width: 100%; 
            color: #999999;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td class="strowb1">
                <a class="nodecor" href="#">
                    <div class="fullcell">Watch</div>
                </a>
            </td>
        </tr>
    </table>
</body>
</html>

When executed, "Watch" has a very persistent underline on hover. Setting text-decoration: none does not seem to remove it.

I have tried setting text-decoration to none on the table, tr, td and div as well.

Please suggest ideas to do so.

Note: Removing the link to bootstrap css does remove the underline, but I need it in other areas of the code.

You should increase specificity of your rule because bootstrap targets a:hover and takes precedence. Another option is to put a same specific rule after bootstrap one. If two declarations have the same weight, origin and specificity, the latter specified wins.

.nodecor:hover {
  text-decoration: none;
}
.strowb1 {
  width: 150px;
  height: 35px;
  background-color: #1F375F;
  text-align: center;
  color: #999999;
  font-family: calibri;
  font-weight: bold;
  font-size: 110%;
  display: block;
}
.fullcell {
  height: 100%;
  width: 100%;
  color: #999999;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<table>
  <tr>
    <td class="strowb1">
      <a class="nodecor" href="#">
        <div class="fullcell">Watch</div>
      </a>
    </td>
  </tr>
</table>

Try this:

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

Setting text-decoration to div, and other table specific tag is not useful. This property is specifically defined for anchor <a> tag.

See, if that helps.

也加

.nodecor:hover 
{
    text-decoration: none;
}

链接地址: http://www.djcxy.com/p/74620.html

上一篇: 我如何消除非强调

下一篇: 从链接中删除下划线