Diferència entre revisions de la pàgina «Sol hover»

Revisió de 19:53, 2 març 2020

<!DOCTYPE html>
<html>

<head>
    <title>Div fantasmas</title>
<style>


div {
  border-radius: 5px;
  background-color: #ABCDEF;
  transition: background-color 0.5s ease;
  display:inline;
  font-size:25px;
  padding:20px;
  border:1px solid #ccc;
  margin-top:10px;
}

.active {
  background-color:#556677;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type='text/javascript'>
        $(document).ready(function () {

            $('div').hover(
                function () {
                    $(this).addClass('active'); //primera función se ejecuta cuando pasa el ratón por encima
                },
                function () {
                    $(this).removeClass('active'); //segunda función se ejecuta cuando sale el ratón del div
                }
            );

        });
    </script>
</head>

<body>
    <div>Página principal</div>
    <div>Acerca de nosotros</div>
    <div>Contactanos</div>
</body>

</html>