Code for hovering effect in css it should hover over  a tab

You can add the following property to the .tab class to create a transition effect when the background color changes
 
 

.tab {
  ...
  transition: background-color 0.3s ease-in-out;
}

This will create a transition effect that lasts for 0.3 seconds and has an ease-in-out timing function. You can adjust the duration and timing function to achieve the desired effect.

the code for a hovering effect in CSS that will work on a tab:

 
.tab {
  /* Set the default style for the tab */
}

.tab:hover {
  /* Set the style for the tab when the mouse is hovered over it */
}
 
For example, you could use the following code to change the background color of the tab when the mouse is hovered over it:

 
.tab {
  background-color: #ccc;
}

.tab:hover {
  background-color: #fff;
}
 
You can also use the transition property to animate the change in style when the mouse is hovered over the tab. For example, the following code will animate the change in background color over a period of 0.5 seconds:

 
.tab {
  background-color: #ccc;
}

.tab:hover {
  background-color: #fff;
  transition: background-color 0.5s;
}
 
You can also use the transform property to change the size or position of the tab when the mouse is hovered over it. For example, the following code will scale the tab up by 10% when the mouse is hovered over it:

 
.tab {
  transform: scale(1);
}

.tab:hover {
  transform: scale(1.1);
}
 
You can use the :hover pseudo-class to style any element when the mouse is hovered over it. This is a very powerful technique that can be used to add interactivity to your web pages.

Try this code 

Hover Tabs
Move the mouse over a button inside the tabbed menu:


  London
  Paris
  Tokyo



  
London
  
London is the capital city of England.



  
Paris
  
Paris is the capital of France.
 



  
Tokyo
  
Tokyo is the capital of Japan.