Changing text after :focus and :hover-CodePudding

I'm creating a website. On default, I want to have an fontawesome icon on the div, but when user hover to this div or key focus I want to hide the icon and show text "Home", "Offert" etc.

.page-nav-menu {
  height: 45px;
  width: 100%;
  margin: auto;
  text-align: center;
}

.nav-menu-option {
  height: 100%;
  width: 120px;
  text-align: center;
  background: black;
  color: white;
  font-size: 22px;
  padding: 5px;
  padding-top: 20px !important;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
  transition: 0.5 background;
  margin: auto;
  margin-right: 10px !important;
}

.nav-menu-option:focus,
.nav-menu-option:hover {
  outline: none;
  background: #1b63f4c8;
  transition: 0.5 background;
  cursor: pointer;
  outline: none;
}

.page-nav-menu a {
  color: #1b63f4c8;
  border-bottom: none;
}

.page-nav-menu a:focus,
.page-nav-menu a:hover {
  outline: none;
  border-bottom: none;
}

#nav-option-1 {
  width: 100px;
  margin-left: 350px;
}

#nav-option-1::before {
  content: '';
}

#nav-option-1::after,
#nav-option-1:hover {
  content: Home;
}

#nav-option-2 {
  width: 130px;
}

a {
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 3px solid black;
  border-radius: 1px;
}

a:focus,
a:hover {
  border-bottom: 3px solid #1b63f4;
  border-radius: 1px;
}

<div >
  <a href="/">
    <div  id="nav-option-1"><i ></i></div>
  </a>
  <a href="offer">
    <div ><i ></i></div>
  </a>
  <a href="realisations">
    <div  id="nav-option-2"><i ></i></div>
  </a>
  <a href="about-me">
    <div >fa-solid fa-user</div>
  </a>
  <a href="contact">
    <div ><i ></i></div>
  </a>
</div>

What can I do?

Kind Regards

CodePudding user response：

I'm a new programer so I'm not sure if I can help you but this is my result

result:

const iconElement = document.querySelector('.fa-globe'); /*icon element*/
const nav_menu_option = document.getElementById('nav-option-2')/*nav option element */

nav_menu_option.addEventListener('mouseenter', () => {
  iconElement.style.display = 'none';
  nav_menu_option.innerHTML = 'realisations' ;
})
    
nav_menu_option.addEventListener('mouseleave', () => {
    iconElement.style.display = 'block'/*or whatever you want*/;
    nav_menu_option.innerHTML = '<i ></i>';
})

<html>
<body>
    <a href="realisations">
        <div  id="nav-option-2"><i ></i></div>
    </a>
</body>
<script src="https://kit.fontawesome.com/8367bf7b85.js" crossorigin="anonymous"></script>
</html>

I really really hope I helped you.

CodePudding user response：

You can put icon in a div and put display:none; property inside nav-menu-option:hover

.page-nav-menu {
  height: 45px;
  width: 100%;
  margin: auto;
  text-align: center;
}

 .nav-menu-option .text {
  display: none;
 }

.nav-menu-option {
  height: 100%;
  width: 120px;
  text-align: center;
  background: black;
  color: white;
  font-size: 22px;
  padding: 5px;
  padding-top: 20px !important;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
  transition: 0.5 background;
  margin: auto;
  margin-right: 10px !important;
}

.nav-menu-option:focus,
.nav-menu-option:hover {
  outline: none;
  background: #1b63f4c8;
  transition: 0.5 background;
  cursor: pointer;
  outline: none;
}

.page-nav-menu a {
  color: #1b63f4c8;
  border-bottom: none;
}

.page-nav-menu a:focus,
.page-nav-menu a:hover {
  outline: none;
  border-bottom: none;
}

#nav-option-1 {
  width: 100px;
  margin-left: 350px;
}

#nav-option-1::before {
  content: '';
}

#nav-option-1::after,
#nav-option-1:hover {
  content: Home;
}

#nav-option-2 {
  width: 130px;
}

a {
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 3px solid black;
  border-radius: 1px;
}

a:focus,
a:hover {
  border-bottom: 3px solid #1b63f4;
  border-radius: 1px;
}

 .nav-menu-option:hover .icon {
  display: none;
 }

 
 .nav-menu-option:hover .text {
  display: block;
 }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js"></script>

<div >
  <a href="/">
  <div ><div ><i ></i></div><div >Home</div></div>
  </a>
  <a href="offer">
  <div ><div ><i ></i></div><div >Offer</div></div>
  </a>
  <a href="realisations">
  <div ><div ><i ></i></div><div >Realisation</div></div>
  </a>
  <a href="about-me">
    <div ><div >
   <i ></i>
    </div><div >About me</div></div>
  </a>
  <a href="contact">
  <div ><div ><i ></i></div><div >Contact</div></div>
  </a>
</div>

CodePudding user response：

if you want it with fade effect you can use this :)

PS: optimized your code and removed unnecessary ones

body {
  margin: 0;
  padding: 0;
}

.page-nav-menu {
  text-align: center;
}

.page-nav-menu a {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.nav-menu-option {
  position: relative;
  display: inline-block;
  margin: 0 5px 5px;
  padding: 20px 5px;
  width: 120px;
  font-size: 1.5em;
  border-radius: 0 0 40px 40px;
  background: black;
  color: white;
  transition: all 0.5s ease;
}

.nav-menu-option:focus,
.nav-menu-option:hover {
  background: #1b63f4c8;
  cursor: pointer;
}

.nav-menu-option>* {
  transition: visibility 0.5s, opacity 0.3s linear;
}

.nav-menu-option>.title {
  font-family: 'Courier New', Courier, monospace;
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  bottom: 30%;
  text-transform: uppercase;
  visibility: hidden;
}

.nav-menu-option:hover .title,
.nav-menu-option:focus .title {
  visibility: visible;
  opacity: 1;
}

.nav-menu-option:hover .icon,
.nav-menu-option:focus .icon {
  opacity: 0;
  visibility: hidden;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" />
<div >
  <a href="#">
    <div >
      <i ></i>
      <span >Home</span>
    </div>
  </a>
  <a href="#">
    <div >
      <i ></i>
      <span >Laptop</span>
    </div>
  </a>
  <a href="#">
    <div >
      <i ></i>
      <span >Global</span>
    </div>
  </a>
  <a href="#">
    <div >
      <i ></i>
      <span >User</span>
    </div>
  </a>
  <a href="#">
    <div >
      <i ></i>
      <span >Mail</span>
    </div>
  </a>
</div>

CodePudding user response：

Try the following it should work using display none and display block on each child element

   CSS
     <style>
      .page-nav-menu {
        height: 45px;
        width: 100%;
        margin: auto;
        text-align: center;
      }

      .nav-menu-option {
        height: 100%;
        width: 120px;
        text-align: center;
        background: black;
        color: white;
        font-size: 22px;
        padding: 5px;
        padding-top: 20px !important;
        border-bottom-left-radius: 40px;
        border-bottom-right-radius: 40px;
        transition: 0.5 background;
        margin: auto;
        margin-right: 10px !important;
      }

      .nav-menu-option:focus,
      .nav-menu-option:hover {
        outline: none;
        background: #1b63f4c8;
        transition: 0.5 background;
        cursor: pointer;
        outline: none;
      }

      .page-nav-menu a {
        color: #1b63f4c8;
        border-bottom: none;
      }

      .page-nav-menu a:focus,
      .page-nav-menu a:hover {
        outline: none;
        border-bottom: none;
      }

      #nav-option-1 {
        width: 100px;
        margin-left: 350px;
      }

      #nav-option-1::before {
        content: "";
      }

      #nav-option-1::after,
      #nav-option-1:hover {
        content: Home;
      }

      #nav-option-2 {
        width: 130px;
      }

      a {
        color: #1a1a1a;
        text-decoration: none;
        border-bottom: 3px solid black;
        border-radius: 1px;
      }

      a:focus,
      a:hover {
        border-bottom: 3px solid #1b63f4;
        border-radius: 1px;
      }
      .nav-menu-option:hover i {
        display: none;
      }
      .nav-menu-option:hover span {
        display: block;
      }
      .nav-menu-option span {
        display: none;
      }
    </style>
   
   
   
   
   
Html 

<div >
  <a href="/">
    <div  id="nav-option-1">
      <i ></i><span>home</span>
    </div>
  </a>
  <a href="offer">
    <div >
      <i ></i><span>gallery</span>
    </div>
  </a>
  <a href="realisations">
    <div  id="nav-option-2">
      <i ></i><span>etc</span>
    </div>
  </a>
  <a href="about-me">
    <div >
      <i ></i><span>test</span>
    </div>
  </a>
  <a href="contact">
    <div >
      <i ></i><span>test</span>
    </div>
  </a>
</div>