Hide Hyperlink Line using css

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?

possible duplicate of [How to remove the underline for anchors(links)?](http://stackoverflow.com/questions/2041388/how-to-remove-the-underline-for-anchorslinks) — Antony, Apr 23 '13 at 08:27
@Antony: I think there’s a little more to this question that the duplicate, given the HTML. — Paul D. Waite, Apr 23 '13 at 09:04

score 8 · Accepted Answer · edited Feb 12 '16 at 12:05

8

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>

edited Feb 12 '16 at 12:05

John Slegers

45,213
22
199
169

answered Apr 23 '13 at 08:45

Nix

5,746
4
30
51

Working as Magic :) Thank you ALL – Robinlolo Apr 23 '13 at 08:52
still need 15 Rep points :( ...This is my first Q here :) ..I will do it once I gain some. Thx Nix and Thanks all. – Robinlolo Apr 23 '13 at 09:01
You could alternatively move the `menubox` and `mcolor1` classes onto the ``, and add `display:block;` and `text-decoration:none` to the `.menubox` style block. This would make the HTML a bit shorter – Paul D. Waite Apr 23 '13 at 09:18
@Robinlolo: ah: you might need `.menubox:hover { text-decoration:none; }`, instead of adding `text-decoration:none` to the `.menubox` style block. – Paul D. Waite Apr 23 '13 at 11:39

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

2

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 23 '13 at 08:27

Morpheus

8,829
13
51
77

Thank you for your reply, But I can apply the href on the full div – Robinlolo Apr 23 '13 at 08:29
@Morpheus: They can in the current version of HTML (HTML5). Try it: http://validator.w3.org/ – Paul D. Waite Apr 23 '13 at 08:30
1

Actually, in HTML5, you may nest block elements inside links. If it's anything other than HTML5, like XHTML or whatever, then it will be invalid, yes. http://html5doctor.com/block-level-links-in-html-5/ – Nix Apr 23 '13 at 08:30

score 1 · Answer 3 · edited Feb 12 '16 at 12:04

1

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>

edited Feb 12 '16 at 12:04

John Slegers

45,213
22
199
169

answered Apr 23 '13 at 08:27

Paul D. Waite

96,640
56
199
270

I will try this one, and let you know. Thank you – Robinlolo Apr 23 '13 at 08:37
I still want use my html structure – Robinlolo Apr 23 '13 at 08:39
go to test page

In this case I can treat the Div as Button – Robinlolo Apr 23 '13 at 08:40
You assume OP has control over the HTML. In that case, it might be better not to alter the structure, but to give the `` a class, which may be targetted. – Nix Apr 23 '13 at 08:42
@Robinlolo: gotcha. I think keeping your original HTML is the better idea anyway — I’m not sure the `height:100%` in my CSS will work. – Paul D. Waite Apr 23 '13 at 09:06
@Nix: I did assume that, although if he/she doesn’t control the HTML, he/she can’t give the link a class either. – Paul D. Waite Apr 23 '13 at 09:07

Hide Hyperlink Line using css

3 Answers3

Note :

go to test page