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?

Était-ce utile?

La 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>

Autres conseils

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>

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top