Hide Hyperlink Line using css

StackOverflow https://stackoverflow.com/questions/16164456

Question

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?

Was it helpful?

Solution

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>

OTHER TIPS

If you want to remove the underline on hover, use this CSS:

a:hover {
   text-decoration: none;
}

Note :

Unless your page uses the HTML5 doctype (<!doctype html>), your HTML structure is invalid. Divs can't be nested inside a element before HMTL5.

With the HTML as it stands, you can’t hide the link underline just for this link.

The following CSS will remove the underline for all links:

a:hover {
    text-decoration: none;
}

To remove it for just this link, you could move the link inside the <div>:

.menubox > a {
    display: block;
    height: 100%;
}

.menubox > a:hover {
    text-decoration: none;
}
<div class="menubox mcolor1">
    <a href="test.html">
        <h3>go to test page</h3>
    </a>
</div>

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top