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.
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.
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.
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).
You would use the :hover
psuedo-class on the parent element, followed by the child element.
Updated jsFiddle example
.TheOuterClass:hover .TheInnerClass {
color:blue;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With