The attribute of tag a overrid its parent(div)?_问答_开发者

The attribute of tag a overrid its parent(div)?

开发者 https://www.devze.com 2023-01-21 00:48 出处：网络

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.

相关专题：css

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="开发者_JS百科">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>

the trick is to select an a within a hovered .witha like this JSFiddle

.witha:hover a {
    color: red;
}

or in full:

<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 {

}

.witha:hover a {
    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>

Make hover color is important attribute

.witha:hover,.withouta:hover {
    color: red !important;
}

You need to look at the specificity of CSS selectors.

Either increase the :hover one, or use !important.

You didn't tell us which browser you are testing in.
IE6 allows 'hover' psuedo tag only on the <a> tags.

I think what you need is this rule, if I understand your question correctly.

a:hover, .witha:hover a{
    color: red
}

This (witha:hover a) is more specific than the following rule, which was previously governing the text colour of the link, even when the witha:hover rule was applied

    a:link {
    color: black;
}

As an aside, the use of !important in CSS rules should be restricted to when there is no alternative. If possible, use a more specific selector instead.

Make sure you read the specificity information on the link in @Alex's answer.