Modify the color of the text using CSS

Question

Modify the color of the text using CSS

After examining the following HTML code:

<div id="a" class="a_button">
    <a class="a_link" href="#"> 

        <div class="icon_container">
            <img class="icon_image" src="#">
        </div>

        <div class="title_container"> 
            <span class="title_inactive">               
            Title
            </span>
        </div>
    </a>    
</div>

To illustrate the issue better, an image has been attached.

As shown, the button contains two divs: icon_container and title_container.

Upon hovering over the button, the background color changes as expected. Currently, the text color of title is black by default and should switch to white when hovered over.

When the mouse hovers over the title_container div, the text color changes correctly between black and white.

However, when hovering over the icon_container, the text color remains unchanged to white even though the background color switches.

Is there a way to ensure that hovering over the icon_container will also modify the title color?

Here's the current progress for reference:

https://jsfiddle.net/8wfhnupk/5/

Thank you!

css

Answer 1

Answer №1

When you hover over the a tag, make sure to change the color of the span within the title_container class.

Include this in your CSS:

a:hover .title_container span{
 color:#fff;   
}

Alternatively, for the jsfiddle link:

.royal_button a:hover .royal_menu_title{
 color:#fff;   
}

Answer 2

When you hover over the a tag, make sure to change the color of the span within the title_container class.

Include this in your CSS:

a:hover .title_container span{
 color:#fff;   
}

Alternatively, for the jsfiddle link:

.royal_button a:hover .royal_menu_title{
 color:#fff;   
}

Answer 3

Answer №2

Include the following snippet in your CSS file:

.title_container > .title_inactive:hover{color:white}

Answer 4

Include the following snippet in your CSS file:

.title_container > .title_inactive:hover{color:white}

Answer 5

Answer №3

Another option is to utilize the following code:

<style>

.icon_container:hover{
color:#000;
background-color:#fff;
}
.title_container:hover{
color:#FFF;
background-color:green;
}

</style>

Answer 6

Another option is to utilize the following code:

<style>

.icon_container:hover{
color:#000;
background-color:#fff;
}
.title_container:hover{
color:#FFF;
background-color:green;
}

</style>

Answer 7

Answer №4

Here is the answer you're looking for:

.nav_button:hover div {
    background-color: #333;
}

Check out the updated version on JSFiddle

Answer 8

Here is the answer you're looking for:

.nav_button:hover div {
    background-color: #333;
}

Check out the updated version on JSFiddle

Answer 9

Answer №5

<div class="header_container" style="color:blue"> 
            <span class="header inactive">               
            Header
            </span>
        </div>

When you use inline styling like in the example above, the color of the text will be altered.

Answer 10

<div class="header_container" style="color:blue"> 
            <span class="header inactive">               
            Header
            </span>
        </div>

When you use inline styling like in the example above, the color of the text will be altered.

Modify the color of the text using CSS

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the best way to justify list items to the left?

Is it possible to alter the CSS of an HTML page dynamically from within an iFrame on a separate webpage?

Problem with jQuery offset: SWF position remains unaffected

Make sure to consistently show the rating bubble within the md-slider

A guide on navigating full images using CSS

Update the position of a div when an element becomes visible

Designating the selected button as "active"

Java - openpdf - Splitting words using hyphens

Using CSS syntax to target a class within an element distinguished by its unique id

Tips for setting background colors as a prop for Material UI cards in React JS

The background color property returns as blank, failing to update on the screen despite my attempt to assign a new value

Styling an unordered list with CSS in HTML is a powerful

Adjust the Font Size of Bootstrap 3 across different breakpoints

CSS is not being applied correctly in Safari 13 following a resize

The Bootstrap website is experiencing issues with mobile responsiveness as a result of content overflow

Generate a dynamic image using CSS and either a div or a span tag

Ways to incorporate margins into text on PDF pages produced by Puppeteer without altering the background color

How to dynamically adjust column width based on maximum content length across multiple rows in CSS and Angular

Center align list items while concealing any overflow

Having trouble with redirecting a website to its appropriate version for mobile or desktop users?