jQuery addClass example

Change class name on click in jQuery

by boctulus

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="intento.js"></script>
    <link rel="stylesheet" href="2.css">

    <title>Document</title>
</head>

<body>
    <div class="header">
  <div class="menu menu1">
        <div><button class="boton1">Menu</button></div>
        <div class="caja caja1">
            <div><a href="#">Inicio</a></div>
            <div><a href="#">Inicio</a></div>
            <div><a href="#">Inicio</a></div>
        </div>
    </div>

    <div class="menu menu2">
        <div class="boton"><button>Menu</button></div>
        <div class="caja caja2">
            <div><a href="#">Inicio</a></div>
            <div><a href="#">Inicio</a></div>
            <div><a href="#">Inicio</a></div>
        </div>
    </div>
<div class="menu menu3">
        <div class="boton"><button>Menu</button></div>
        <div class="caja caja3">
            <div><a href="#">Inicio</a></div>
            <div><a href="#">Inicio</a></div>
            <div><a href="#">Inicio</a></div>
        </div>
    </div>
</div>

</body>

</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

CSS

body{
    background:rgb(0, 0, 0);
    
}
.header{
    width:100%;
    margin:auto;
    display:flex;
    justify-content:flex-start;
    
}
.boton{
    width:100%;
}
button{
    border:none;
    background:none;
    color:red;
    font-size:40px;
}
button:hover{
text-shadow:1px 2px 8px rgb(255, 0, 0);
cursor:pointer;
}
a:hover{
    color:red;
}

.menu1,.menu2,.menu3{
    display:inline-flex;
    flex-direction:column;
}
.caja1 , .caja2 , .caja3{
    
    width:200px;
    height: 200px;
    border:3px solid rgb(255, 251, 2);
    box-shadow:0px 0px 8px  rgb(255, 251, 2);
    
    
}
a{
    font-size:20px;
    color:white;
    text-decoration:none;
    
}



.caja{
  /*
    width:200px;
    height: 200px;
    margin:20px;
    color:rgb(134, 101, 177);
    border:3px solid rgb(20, 235, 13);
    display:inline-block;
    text-align:center;
    box-shadow:0px 0px 8px rgb(20, 235, 13);
    */
}

/*---------------------------------------------------------------*/

.caja22{
    width:200px;
    height: 200px;
    margin:20px;
    color:rgb(10, 6, 248);
    border:3px solid rgb(10, 6, 248);
    display:inline-block;
    text-align:center;
    box-shadow:0px 0px 8px rgb(10, 6, 248);
    cursor:pointer;
}

JavaScript

// find elements
$(document).ready(function () {
    var boton = $(".boton1");
    $(".caja1, .caja2 ,.caja3").css('display','none');

    /*$("#segunda").prevAll().css({
        background: "rgb(255, 251, 2)"
    });*/

boton.on("mouseenter", function () {
        $(".caja1").show(1000);
        });
boton.on("mouseleave", function () {
    
       // $(".caja1").hide(1000);
    });
    
$('.caja1').on("mouseleave", function(){
	$(".caja1").hide(1000);
));
    


});