CODEWITHSUNDEEP
csscss-selectors
Denzil Bennett
Denzil Bennett

Reputation: 71

Difference in CSS3 :hover selectors

What is the difference between these two

footer:hover a{}

and

footer a:hover{}.

This has been causing a bit of confusion in our CSS3 class and the research I have done into it hasn't shed much light on it.

Upvotes: 1

Views: 88

Answers (4)

Gaurang Tandon
Gaurang Tandon

Reputation: 6781

footer:hover a{}

Matches an <a> element which is a child of a footer element which is in hover state.

<footer>                                <---  hovered
    <a href="#">Some text</a><br/>      <--- both matched
    <a href="#">Some text 2</a>         <--- both matched
</footer>
<a href="#">Lost in dark</a>            <--- unmatched, as it's not a child of <footer>

footer a:hover{}

Matches an <a> which is being :hovered on and is a child of a <footer> element.

<footer>
    <a href="#">Some text</a><br/>      <--- hovered, matched
    <a href="#">Some text 2</a>         <--- unmatched
</footer>
<a href="#">Lost in dark</a>            <--- hovered, but then also unmatched, as not a child of <footer>

Here's a fiddle to demonstrate difference.

Hope that makes it clear!

Upvotes: 4

CRABOLO
CRABOLO

Reputation: 8793

footer:hover a is a pseudo selector. If you hover over any part of the footer, it will target the <a> element

For example

footer:hover a {
    background: red;
}

Hovering over any part of the footer will just give the link a background of red, and the footer css will not be changed.

footer a:hover selects any a elements that are child elements of footer. So if you hover over a link that is a child of a footer tag, it will do that css. This is different from the first example, in that you have to hover over the link to change the background of the link.. not just hover any part of the footer.

For example

footer a:hover {
    background: green;
}

Just trying things out yourself or seeing the code in an example can help a lot : DEMO FIDDLE

Upvotes: 2

Jaykumar Patel
Jaykumar Patel

Reputation: 27624

footer:hover a{}

its define footer element inside a element to apply.

where as footer a:hover{}

its define footer element inside a element to apply hover effect.

Check demo jsFiddle

HTML

<footer>
    <a href="#">Hello Stackoverflow</a>
</footer>

CSS

footer{
    width:300px;
    height:40px;
    border:1px solid blue;
}
footer:hover a{
    background-color: red;
}

footer a:hover{
    background-color:yellow;
}

Upvotes: 1

Sachin Jain
Sachin Jain

Reputation: 21842

footer:hover a{ color: red } selects the anchor element and changes the color to red only when the footer is hovered.

footer a:hover{ color: red} changes the color of anchor element whenever it is inside footer and it is also hovered upon.

Take this example:

Assume the footer has other elements as well apart from anchor.

<footer>
  <div> I am div</div>
  <a> I am anchor </a>
</footer>

Now when you hover on div, in first case it will change the color of anchor to red. Because div is a part of footer and since the footer is also hovered, your selector applies and change its color.

Second example:

<a> Anchor 1: I am outside footer  </anchor>
<footer>
   <a> Anchor2: I am anchor </a>
</footer>

Now, in case 2, if you hover on anchor 1, it won't change the color to red because it is not inside footer while hovering on anchor 2 will change its color.

Upvotes: 1

Related Questions