<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="description" content="Uso de la función next() de JQuery">
<meta name="Author" content="David Gimenez Plaza">
<meta name="keywords" content="funcines, Jquery, next()">
<meta name= "viewport" content = "width=device-width, initial-scale=1.0" >
<title>Función next() de JQuery</title>
<link rel="stylesheet" type="text/css" href= "file.css">
<link rel="shortcut icon" href="file.icon">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<header>
<h1>Ejemplo de función next() de Jquery, pasa el ratón por este h1</h1>
</header>
<nav>
</nav>
<body>
<article class="Articulo-1">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eligendi distinctio, optio iusto ducimus at iure doloremque ipsa aliquid amet exercitationem natus qui temporibus enim quos dicta magnam ea eius ipsum?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio iste eius voluptates veritatis totam ullam maxime, at, quas delectus quisquam facere officiis laboriosam, expedita quis possimus ea eligendi. Minus, nisi.</p>
</article>
<article class="Articulo-2">
<p>Id totam reprehenderit ea culpa nobis non iste perferendis dolor? Dolorum recusandae facere, vel eaque cum a consequatur doloribus molestiae quas officia optio culpa id eius ut ipsa quis similique.</p>
</article>
<article class="Articulo-3">
<p>Asperiores nesciunt voluptatum dolorum voluptatem saepe repellat ex, sunt blanditiis animi ullam earum, odit provident dignissimos, vel impedit eaque ratione. Temporibus facere enim tempora a totam rerum possimus sed tenetur!</p>
</article>
<article class="Articulo-4">
<p>Rerum itaque ea fugiat totam magnam velit dolore inventore amet, soluta harum, voluptatum, debitis repellendus tenetur. Enim, ratione cum. Repellat, laudantium! Exercitationem, id velit minima ipsam cum modi dolorem quod!</p>
</article>
<article class="Articulo-5">
<p>Maiores enim labore totam, voluptatibus tempora sequi eum eaque quidem id! Sequi libero omnis qui dicta quae ipsa veniam corrupti ullam magnam alias reprehenderit eligendi delectus, voluptate maiores unde quod.</p>
</article>
</body>
</html>
$("h1").hover(function(){
$("article").next().hide(2000);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.