[Résolu] mouseOver problème - Bootstrap - mouseOver fonctionne comme un onclik par LouisCastel3 - page 1

Bonjour,

Je débute en javascript et j'aimerai réaliser un effet de mouseover sur ma navbar en changeant la couleur de mes éléments à l'intérieur.

Je pense avoir réussi seulement, mes fonction mouseOver et mouseOut fonctionne comme si c'est des onclick (je crois..) alors que j'aimerai que ma navbar est un effet comme le "hover" en CSS.

Dite moi si vous voyez quelque chose qui cloche ou si c'est juste Bootstrap qui applique les effets différemment.

Merci d'avance.

Mon HTML avec le JS à la fin :

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    
        <link rel="stylesheet" href="style.css">

      

        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
        <title>Burger</title>
    </head>
<body>
    <div id="section1">
        <nav class="navbar" id="demo" >
            <a class="navbar-brand" id="titre" href="#">.MODERN.</a>

            <button id="bouton"
            class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation"id="style">
              <i class="fa fa-bars"></i>
            </button>
          
            <div class="collapse navbar-collapse" id="navbarsExample01">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active">
                  <a class="nav-link" href="#"id="bouton">Link</a>
                </li>
                <li class="nav-item active">
                  <a class="nav-link " href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </li>
                <li class="nav-item dropdown active">
                  <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                  <div class="dropdown-menu" aria-labelledby="dropdown01">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                  </div>
                </li>
              </ul>
              <form class="form-inline my-2 my-md-0">
                <input class="form-control" type="text" placeholder="Search" aria-label="Search">
              </form>
            </div>
          </nav>
          
    </div>
    
    <script >
        document.getElementById("demo").addEventListener("mouseover", mouseOver);
        document.getElementById("demo").addEventListener("mouseout", mouseOut);
        
        function mouseOver() {
          document.getElementById("demo").style.backgroundColor = "white";
          document.getElementById("demo").style.color= "black";
          document.getElementById("bouton").style.color="black";
          document.getElementById("titre").style.color="black";
          }
        
        function mouseOut() {
          document.getElementById("demo").style.backgroundColor = "";
          document.getElementById("demo").style.color= "";
          document.getElementById("bouton").style.color="white";
          document.getElementById("titre").style.color="white";
        }

        
        </script>
   
</body>
</html>

Mon CSS:

*{
    padding:0;
    margin:0;
    box-sizing:border-box;
}

#section1{
    background-image:url(img/1.jpeg);
    background-size:cover;
    background-position-x: center;
    background-repeat:no-repeat;
    width:100%;
    height:100vh;
}

.navbar-toggler{
    color:white;
}
.parent {
    border: 1px solid black;
    flex: 1;
    
    height: 300px;
  }
 #navigation{
     height:20vh;
     border:1px solid red;

 }
 #demo{
     background-color:rgba(0,0,0,0);
 }
 .navbar-brand{
     color:white;
 }
 .nav-link{
     color:black;
 }

LouisCastel3

3 juillet 2020 à 14:42:09

Domi65

3 juillet 2020 à 20:19:20

Bonjour.

De nos jours, changer la couleur d'un élément au survol par javascript n'est pas judicieux. on le fait via les transitions CSS. Je t'invite vivement à t'y intéresser. C'est super facile

https://developer.mozilla.org/fr/docs/Web/CSS/transition

Cordialement.

mouseOver problème - Bootstrap

mouseOver fonctionne comme un onclik

mouseOver problème - Bootstrap

Supprimer

Modérer

Signaler le message aux modérateurs