CODEWITHSUNDEEP
htmlcss
Doug Fir
Doug Fir

Reputation: 21302

Make the child element white when the parent item is hovered

Is there a way to do this without javascript and just using CSS?

I have a navigation. The text within the anchor elements are black. Upon hover of the line item the line item becomes orange. At that point I would like to alter the child anchor element text to be white.

What I have right now is an anchor tag rule to be white when hovered. Because the anchor is smaller than the line item it means that, hovering over the line item doesn't change the text to white straight away, only when the mouse hovers over the center, where the anchor tag is.

I could post html but I don't think its necessary. Is it? Hope I'm making sense and that my question is clear.

Put another way, I'd like to alter an element based upon the hover state of it's parent element.

Upvotes: 0

Views: 97

Answers (2)

Benjamin
Benjamin

Reputation: 2670

You can try this. Giving a tag display:block; will take the full width of your li element.

#menu li a:hover {
    background: #FC6;/*added*/
}
#menu a {
    color: #000;
    dispaly:block;/*added*/
}

DEMO

Upvotes: 1

Salman Arshad
Salman Arshad

Reputation: 272386

It is not possible to target the parent element using CSS selector. You can instead add a :hover rule to line item to change its background color. At the same time, add an additional rule that changes the color of the child link upon hover:

li:hover {
    background: orange;
}
li:hover a {
    color: white;
}

Demo

Upvotes: 3

Related Questions