JSFiddle - React, Tailwind, and code Playground

by quanghoan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p class="dbClick" style="color: blue;"> Double-click on me to disappear.</p>

<p><img class="click"  src="http://www.w3schools.com/css/img_fjords.jpg" width="300" height="200" style="color: blue;">Click on me to disappear.</p>

<p id="p1">Hover me to yellow, leave me to black color</p>

<p id="showAll" style="color: green;">Click me show all!</p>

<p id="p2"> Mouse up here!...</p>

<p id="p3"> Handsome Hoan mouse down!!!</p>

<p id="p4"> This line stands for hover jQuery event.</p>

CSS

.yellowColor{color:yellow;}

JavaScript

$(document).ready(function(){
    $("p.dbClick").dblclick(function(){
        $(this).hide();
    });

    $("img.click").click(function(){
        $(this).hide();
    });

    $("#showAll").click(function(){
        $("p").show();
        $("img").show();
    });

    $("#p1").mouseenter(function(){
        $(this).addClass("yellowColor");
    });

    $("#p1").mouseleave(function(){
        $(this).removeClass("yellowColor");
    });
    
    $("#p2").mouseup(function(){
        alert("You has Mouse up over p2!");
    });
    
    $("#p3").mousedown(function(){
        alert("Mouse down Hoan handsome");
    });
    
    $("#p4").hover(function(){
        alert("You entered p4!");
    },
    function(){
        alert("Bye! You now leave p4!");
    });
});