<!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);
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.