link around div in google chrome

I have a parent div and few other divs nested in it containing te开发者_C百科xt. what I want to do is to change the background color of my parent div on hover and redirect to another page on click

so i did

<a href="">
  <div class="parentDiv">
    <div>hello</div>
    <div>user</div>
  </div>
</a>

.parentDiv:hover{background-color:#72c1bf;cursor:pointer;text-decoration:none;}

and it actually works in IE8 and firefox but in chrome I have underlined all the single textes inside the two child divs. Why?

Because text-decorations are on <a> tag, you need to set text-decoration: none; for the <a> tags too.

But, according to the html standard, a <a> tag, wich is an inline element, should not contain any block elements, such as <div>'s, see html specifications

Try a:hover{text-decoration:none} testing it in ie9 and chrome with your original code doesn't work eben with the !important attribute.

Try this perhaps:

<a href="" class="link">
  <div class="parentDiv">
    <div>hello</div>
    <div>user</div>
  </div>
</a>

And CSS:

a.link{display:block; text-decoration:none}
.parentDiv:hover{background-color:#72c1bf;cursor:pointer;text-decoration:none;}

If a single

<a>

tag is a problem(like it was for me). Use this:

<a href='#' style='text-decoration:none;' >

Adding text-decoration: none to the a tag made it go away, but I'm not sure if Chrome is right or wrong, here. Using an a tag as a block element like that works, but I'm not sure how legal it is prior to HTML 5. Also, I had to add color: black, otherwise the text was also blue or purple (visited or unvisited link color).