Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

applying style to inner div on hover of outer div [duplicate]

Tags:

html

css

I have some HTML that looks like this:

<div class="TheOuterClass">
    <div class="TheInnerClass">some text</div>
</div>

With the following CSS:

.TheOuterClass{
    width:100px;
    padding:5px 5px;
    background:black;}

.TheOuterClass:hover{
    pointer:cursor;
    background:red;
    color:yellow;}

.TheInnerClass{color:white;}

What I want to do is have the text of the inner div change color on hover of the outer div. How can I do this with CSS only?

The jsFiddle is here

PS: I know it can easily be done with jQuery but this is about doing it with CSS only.

like image 235
frenchie Avatar asked Nov 29 '13 20:11

frenchie


People also ask

When I hover over an element change another CSS?

Approach: This task can be accomplished by adding one element inside the other element & accordingly declaring the required CSS properties for the parent-child elements, so that whenever hovering outside the element then automatically the property of the inner element will change.

How do you make a div appear when hover over another div?

To display div element using CSS on hover a tag: First, set the div element invisible i.e display:none;. By using the adjacent sibling selector and hover on a tag to display the div element.

How do you define hover in CSS?

The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).


1 Answers

You would use the :hover psuedo-class on the parent element, followed by the child element.

Updated jsFiddle example

.TheOuterClass:hover .TheInnerClass {
    color:blue;
}
like image 135
Josh Crozier Avatar answered Nov 15 '22 08:11

Josh Crozier