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).
精彩评论