Hide Hyperlink Line using css

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

سؤال

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?

هل كانت مفيدة؟

المحلول

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>

نصائح أخرى

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>

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top