W3CSS Hover Colors

In the last tutorial, we started our discussion on W3CSS colors. We saw what are different color classes and what they do. We saw w3-color and w3-text-color classes in action. In this article we shall study W3CSS hover colors. There are two classes that change the color upon mouse hover. The first one is the w3-hover-color class.This class sets the background color of an element when mouse hovers over it. The second class is w3-hover-text-color which sets the color of the text upon mouse hover. Let’s have a look at each of them in action.

w3-hover-color

To use this class in your code, simply replace the word color from the class name with actual name of the color. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-container w3-red w3-hover-white">
        <p>This is with red background<p>
    </div>
    

<div class="w3-container w3-purple w3-hover-blue">
  <p>This is with purple background</p>
</div>

<div class="w3-container w3-light-grey w3-hover-yellow">
  <p>This is with light grey background</p>
</div>
</body>

</html>

Download the code Try the code

The above webpage contains three divs with background colors set to red, purple and light grey respectively. However, now the first div contains a class w3-hover-white. Similarly, second and third divs have classes w3-hover-blue and w3-hover-yellow. Now, open the above page in browser. However the mouse on the first red div. You shall see that its background color will change to white. Similarly, hovering mouse on the second and third divs will change their background colors to blue and yellow respectively. This is how w3-hover-color class works.

w3-hover-text-color

Finally, if you want to change the color of text upon mouse hover, you can use w3-hover-text-color class. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-container w3-text-red w3-hover-text-blue">
        <p>Text changes to blue upon hover<p>
    </div>
    

<div class="w3-container w3-text-purple w3-hover-text-green">
  <p>Text changes to green upon hover</p>
</div>

<div class="w3-container w3-text-light-grey w3-hover-text-yellow">
  <p>Text changes to yellow upon hover</p>
</div>
</body>

</html>

Download the code Try the code

If you look at the above code. The text color of the first div is set to red. Similarly for second and third divs the text color is set to purple and light-grey respectively. Now we have addeded classes w3-hover-text-blue to first div, w3-hover-text-green to second div and w3-hover-text-yellow to third div. These classes change the color of the text upon mouse hover. Now open the above page in browser and hover mouse on first div. You shall see text color changing to blue. Similarly, hovering the mouse on second and third div shall change the text color of the divs to green and yellow respectively.

In this article, we covered W3CSS hover colors. In the next article, we shall start our discussion about containers. Keep visiting this site!

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .