10 Different Usage HTML & CSS Hover Function

Here are ten different ways to use the HTML and CSS hover function:

1. Change the background color of an element when hovered:

HTML:

htmlCopy code<div class="box"></div>

CSS:

cssCopy code.box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

.box:hover {
  background-color: red;
}

2. Add an underline to a link when hovered:

HTML:

htmlCopy code<a href="#" class="link">Hover me</a>

CSS:

cssCopy code.link:hover {
  text-decoration: underline;
}

3. Change the font color of an element when hovered:

HTML:

htmlCopy code<p class="text">Hover me</p>

CSS:

cssCopy code.text:hover {
  color: red;
}

4. Scale an image when hovered:

HTML:

htmlCopy code<img src="image.jpg" class="image">

CSS:

cssCopy code.image:hover {
  transform: scale(1.2);
}

5. Display a tooltip when hovered over an element:

HTML:

htmlCopy code<div class="tooltip">Hover me
  <span class="tooltiptext">Tooltip text</span>
</div>

CSS:

cssCopy code.tooltip {
  position: relative;
}

.tooltip:hover .tooltiptext {
  display: block;
}

.tooltip .tooltiptext {
  display: none;
  position: absolute;
  top: 20px;
  left: 0;
  width: 100px;
  background-color: black;
  color: white;
  padding: 5px;
}

6. Change the opacity of an element when hovered:

HTML:

htmlCopy code<div class="box"></div>

CSS:

cssCopy code.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  opacity: 0.5;
}

.box:hover {
  opacity: 1;
}

7. Rotate an element when hovered:

HTML:

htmlCopy code<div class="box"></div>

CSS:

cssCopy code.box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

.box:hover {
  transform: rotate(45deg);
}

8. Change the border color of an element when hovered:

HTML:

htmlCopy code<div class="box"></div>

CSS:

cssCopy code.box {
  width: 100px;
  height: 100px;
  border: 2px solid blue;
}

.box:hover {
  border-color: red;
}

9. Add a shadow effect to an element when hovered:

HTML:

htmlCopy code<div class="box"></div>

CSS:

cssCopy code.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  box-shadow: 2px 2px 5px grey;
}

.box:hover {
  box-shadow: 5px 5px 10px black;
}

10. Change the font size of an element when hovered:

HTML:

htmlCopy code<p class="text">Hover me</p>

CSS:

cssCopy code.text {
  font-size: 20px;
}

.text:hover {
  font-size: 24px;
}

These are just a few examples of how you can use the hover function in HTML and CSS to add interactivity and visual effects to your web pages. The possibilities are endless, so feel free to experiment and come up with your own creative ideas!