Hide Hyperlink Line using css

css hyperlink hover text-styling

Robinlolo · Apr 23, 2013 · Viewed 26.6k times · Source

I have this HTML Code

<a href="test.html">
<div class=" menubox mcolor1">
<h3>go to test page</h3>
</div>
</a>

and this is the css

.menubox {
    height: 150px;
    width: 100%;
    font-size: 14px;
    color: #777;
    margin: 0 0 0 0;
    padding: 0; 
    -moz-border-radius: 10px;
    border-radius: 10px; 
    position: relative;}

.mcolor1 { background: #3A89BF url(../images/prod2.png) no-repeat center center; }

on mouse hover this div, the text shows the hyperlink line, how can I hide it?

Answer

As others have suggested, it's easy to remove the underline from links. However, if you need to target just this specific link, try giving it a class. Example:

.no-underline:hover {
    text-decoration: none;
}

<a href="test.html" class="no-underline">
  <div class=" menubox mcolor1">
    <h3>go to test page</h3>
  </div>
</a>

Hide Hyperlink Line using css

Answer

Related questions