I have a link in a div,
I want the link color change to red when the div is hovered(not just when the link itself is hovered),however I can not make it work well. This is the exmaple:
<div class="witha"><a href="">Test color without tag A</a></div>
<div class="withouta">Test color with tag A</div>
This is the css:
<style type="text/css">
.witha,.withouta {
height: 40px;
border: solid 1px red;
padding: 5px;
}
.witha:hover,.withouta:hover {
color: red;
}
a:link {
color:black;
}
a:visited {
}
a:hover {
color:red;
}
a:active {
}
</style>
When test the page, I found that in the div which owns a tag a, the hover will not happen unless the link is hovered,it seems that the attribute of tag 'a' override the setting of the div.
How to make it work?(I just want the link color is changed once the div is hovered)
------------Update ---------------------------------
hi, the !important does not work. And I am afraid someone misunderstand me.
Here is a example, please check and test it.
<html>
<head>
<title>Insert title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.witha,.withouta {
height: 40px;
border: solid 1px black;
padding: 5px;
}
.witha:hover,.withouta:hover {
color: red ! important;
}
a:link {
color: black;
}
a:visited {
}
a:hover {
color: red
}
a:active {
}
</style>
</head>
<body>
<div class="witha"><a href="">Test color without tag A</a><br/>This is not a link, it works fine(change to red when the div.witha is hovered).But the link above should change to red also.</div>
<div class="withouta">Test color with tag A</div>
</body>
</html>