'Multicolor heading should change in one color on hover using CSS

I have two title combined, which has their own CSS and want to change it in one color on hover at same time. So as text1 is in black color and text2 is in gray color but on hover both text should change in blue color at same time not one by one. Please suggest any idea. Thanks in advance.

.text1{color: black}
.text2{color: gray}

/* Below code is not required */
.container > a {
  text-decoration: none;
  color: Transparent;
}
.container > a > div:hover{color:blue;}
<div class='container'>
  <a href='#'>
    <div class='text1'>
      Hello
    </div>
    <div class='text2'>
      World!
    </div>
  </a>
</div>
htmlcssphpmysqllaravelhosting


Solution 1:[1]

Change the selecor so that you're targeting :hover on the container and using child selectors to change all the child divs' color:

.text1{color: black}
.text2{color: gray}

.container > a {
    text-decoration: none;
    color: Transparent;
}
.container:hover > a > div {
    color:blue;
}
<div class='container'>
  <a href='#'>
  <div class='text1'>
  Hello
  </div>
  <div class='text2'>
  World!
  </div>
  </a>
</div>

Solution 2:[2]

I have resolved the issue. By default, Namecheap PHP version is set to 7.4 and my app needed the latest version 8.1 to work properly, so I changed the version of PHP to 8.1 in my NameCheap Cpanel and it solved the issue.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 0stone0
Solution 2 Nonsosky

Related Questions