Is it possible to just make like once you hover your mouse over a navigation button in a navbar, it shows the description of it?

user_17390236 0
Viewed 44

When I hover my mouse on a navigation icon in the navigation bar, I want it to simply expand and show what the icon refers to.

Example icons

For example, if I hover my mouse over the Facebook icon, it should shows a description as in a different navigation button saying "Facebook Page" and once I move my mouse away, it goes away.

I'm pretty new to this, I'd appreciate any help.

Current CSS:

.showfacebook {
  display: none;
}

.showbook {
  display: none;
}

.showpen {
  display: none;
}

.showusergraduate {
  display: none;
}

.showusergroup {
  display: none;
}

.showfacebook a:hover {
  display: block;
}

.showbook a:hover {
  display: block;
}

.showpen a:hover {
  display: block;
}

.showusergraduate a:hover {
  display: block;
}

.showusergroup a:hover {
  display: block;
}

css html
1 Answers

Are you looking for the CSS Tooltip? If you want to change the image itself into something else like text then you'll need JavaScript

user_173896500
Related