1
votes

Animation de survol de soulignement de la barre de navigation

J'essaie de créer une animation de survol avec une ligne de soulignement apparaissant lorsque la souris est dessus.

que puis-je ajouter pour y parvenir? J'ai essayé les pré-fabriqués mais cela n'a pas fonctionné. il montrait une ligne apparaissant mais pas sous le texte de la barre de navigation mais sous le site Web lui-même (en bas de l'écran).

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mob-Mob</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav>
    <ul>
      <a href=""><img src="img/logo.png" alt="" style="width: 139px;" id="logo"></a>
      <li style="float: right;" class="hover-nav"><a href="">áƒ™áƒáƒœáƒ¢áƒáƒ¥áƒ¢áƒ˜</a></li>
      <li style="float: right;"><a href="">áƒ©áƒ•áƒ”áƒœáƒ¡ áƒ¨áƒ”áƒ¡áƒáƒ®áƒ”áƒ‘</a></li>
      <li style="float: right;"><a href="">áƒ¥áƒ”áƒ˜áƒ¡áƒ”áƒ‘áƒ˜</a></li>
    </ul>
  </nav>

</body>

</html>

html,
body {
  margin: 0;
  padding: 0;
  background-color: grey;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  height: 100px;
}

li {
  padding: 40px 16px;
  display: table-cell;
  text-align: center;
}

li a {
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  letter-spacing: 2.5px;
}

li a:hover {
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.hover-nav {
  background-color: tomato;
}

#logo {
  margin-left: 30px;
  margin-top: 25px;
}

html css

0 commentaires

4 Réponses :

0
votes

Ajoutez text-decoration:underline à votre li:hover code comme ceci ...

li a:hover {
  text-decoration:underline;
}

0 commentaires

0
votes

Vous devez appliquer la transition à l'élément, pas à son état de survol. Avec la transition vous dites à l'élément comment se comporter si quelque chose change. Dans ce cas, tous les styles (qui sont sensibles à une transition) pendant une période de 0,3 seconde avec une courbe de vitesse d'entrée et de sortie.

Utilisez ensuite le sélecteur :hover pour indiquer les modifications à apporter. Dans ce cas, changez donc la couleur d'arrière-plan et ajoutez un soulignement au texte.

Évitez également d'utiliser des styles en ligne lorsque cela est possible.

<nav>
  <ul>
    <li><a href="">áƒ™áƒáƒœáƒ¢áƒáƒ¥áƒ¢áƒ˜</a></li>
    <li><a href="">áƒ©áƒ•áƒ”áƒœáƒ¡ áƒ¨áƒ”áƒ¡áƒáƒ®áƒ”áƒ‘</a></li>
    <li><a href="">áƒ¥áƒ”áƒ˜áƒ¡áƒ”áƒ‘áƒ˜</a></li>
  </ul>
</nav>

html, body {
    margin: 0;
    padding: 0;
    background-color: grey;
 }

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    height: 100px;
  }
  
  li {
    text-align: center;
    float: right;
  }
  
  li a {
    display: block;
    color: white;
    padding: 40px 16px;
    text-decoration: none;
    font-size: 17px;
    letter-spacing: 2.5px;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    box-sizing: border-box;
    height: 100px;
  }

  li a:hover {
      background-color: tomato;
      border-bottom: 1px solid white;
  }

Si vous aviez l'intention d'appliquer un soulignement au bas de la boîte au lieu du texte, vous pouvez utiliser border-bottom et assurez-vous d'utiliser box-sizing: border box afin que votre élément conserve la même taille lorsque la bordure est ajoutée.

<nav>
  <ul>
    <li><a href="">áƒ™áƒáƒœáƒ¢áƒáƒ¥áƒ¢áƒ˜</a></li>
    <li><a href="">áƒ©áƒ•áƒ”áƒœáƒ¡ áƒ¨áƒ”áƒ¡áƒáƒ®áƒ”áƒ‘</a></li>
    <li><a href="">áƒ¥áƒ”áƒ˜áƒ¡áƒ”áƒ‘áƒ˜</a></li>
  </ul>
</nav>

html, body {
    margin: 0;
    padding: 0;
    background-color: grey;
 }

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    height: 100px;
  }
  
  li {
    text-align: center;
    float: right;
  }
  
  li a {
    display: block;
    color: white;
    padding: 40px 16px;
    text-decoration: none;
    font-size: 17px;
    letter-spacing: 2.5px;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
  }

  li a:hover {
      background-color: tomato;
      text-decoration: underline;
  }

1 commentaires

Si cette réponse fonctionne pour vous, veuillez la marquer comme acceptée et éventuellement la voter.

0
votes

Code HTML non valide, vous avez ajouté la section <a> dans <ul> sans la <li>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mob-Mob</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav>
    <ul>
      <li><a href=""><img src="https://dummyimage.com/100x100/52d41e/fff&text=Logo" alt="" style="width:100%;" id="logo"></a></li>
      <li class="hover-nav"><a href="">áƒ™áƒáƒœáƒ¢áƒáƒ¥áƒ¢áƒ˜</a></li>
      <li><a href="">áƒ©áƒ•áƒ”áƒœáƒ¡ áƒ¨áƒ”áƒ¡áƒáƒ®áƒ”áƒ‘</a></li>
      <li><a href="">áƒ¥áƒ”áƒ˜áƒ¡áƒ”áƒ‘áƒ˜</a></li>
    </ul>
  </nav>

</body>

</html>

changements à

html,
body {
  margin: 0;
  padding: 0;
  background-color: grey;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width:100%;
  background-color: #333;
  height: 100px;
  display: flex;
  align-items: center;
}

li {
  width:100%;
}

li a {
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  letter-spacing: 1.5px;
  border-bottom:4px solid transparent;
  height: 100px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

li a:hover {
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

li a:hover {
  background-color: tomato;
  border-bottom:4px solid #fff;
}

Modifier en CSS:

ul {      
  width:100%;
  display: flex;
  align-items: center;
}
li {
  width:100%; // remove padding and add to `li a`.
}
li a{
  border-bottom:4px solid transparent;
  height: 100px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
li a:hover { // instead of .hover-nav
  background-color: tomato;
  border-bottom:4px solid #fff;
}
// remove #logo margin

Démo de travail

<ul>
  <li><a href=""><img src="img/logo.png" alt="" style="width: 139px;" id="logo"></a></li>
  <li style="float: right;" class="hover-nav"><a href="">áƒ™áƒáƒœáƒ¢áƒáƒ¥áƒ¢áƒ˜</a></li>
  <li style="float: right;"><a href="">áƒ©áƒ•áƒ”áƒœáƒ¡ áƒ¨áƒ”áƒ¡áƒáƒ®áƒ”áƒ‘</a></li>
  <li style="float: right;"><a href="">áƒ¥áƒ”áƒ˜áƒ¡áƒ”áƒ‘áƒ˜</a></li>
</ul>

<ul>
  <a href=""><img src="img/logo.png" alt="" style="width: 139px;" id="logo"></a>
  <li style="float: right;" class="hover-nav"><a href="">áƒ™áƒáƒœáƒ¢áƒáƒ¥áƒ¢áƒ˜</a></li>
  <li style="float: right;"><a href="">áƒ©áƒ•áƒ”áƒœáƒ¡ áƒ¨áƒ”áƒ¡áƒáƒ®áƒ”áƒ‘</a></li>
  <li style="float: right;"><a href="">áƒ¥áƒ”áƒ˜áƒ¡áƒ”áƒ‘áƒ˜</a></li>
</ul>

0 commentaires

0
votes

Essayez ce code, j'ai marqué mes modifications sur votre code css.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mob-Mob</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav>
    <ul>
      <a href=""><img src="img/logo.png" alt="" style="width: 139px;" id="logo"></a>
      <li style="float: right;"><a href="">áƒ™áƒáƒœáƒ¢áƒáƒ¥áƒ¢áƒ˜</a></li>
      <li style="float: right;"><a href="">áƒ©áƒ•áƒ”áƒœáƒ¡ áƒ¨áƒ”áƒ¡áƒáƒ®áƒ”áƒ‘</a></li>
      <li style="float: right;"><a href="">áƒ¥áƒ”áƒ˜áƒ¡áƒ”áƒ‘áƒ˜</a></li>
    </ul>
  </nav>

</body>

</html>

html,
body {
  margin: 0;
  padding: 0;
  background-color: grey;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  height: 100px;
}

li {
  padding: 40px 16px;
  display: table-cell;
  text-align: center;
}

li a {
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  letter-spacing: 2.5px;
}

li a:hover {
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}


/*Edit starts here*/
li {
  position:relative;
}

li::after {
    content: '';
    display: block;
    width: 0;
    position:absolute;
    left:50%;
    height: 2px;
    background: #0077ff;
    transition: cubic-bezier(.77,0,.18,1) 1s;
}

li:hover::after {
    width: 80%;
    left: 10%;
}

li {
  transition: cubic-bezier(.77,0,.18,1) 1s;
}

li:hover {
  background-color: tomato;
}

/*Edit ends here*/

#logo {
  margin-left: 30px;
  margin-top: 25px;
}

0 commentaires