Diferència entre revisions de la pàgina «Sol hover»
De wikiserver
(Es crea la pàgina amb «<source lang="java"> <!DOCTYPE html> <html> <head> <title>Div fantasmas</title> <link rel='stylesheet' type='text/css' href='stylesheet.css'/> <script …».) |
|||
| Línia 2: | Línia 2: | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | <head> | |
| − | + | <title>Div fantasmas</title> | |
| − | + | <style> | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
div { | 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 { | .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> | ||
</source> | </source> | ||
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>
