JSFiddle - React, Tailwind, and code Playground

by FlameTrap

CSS

a{

text-decoration:none;

color:#0075FF;

z-index:1;

}

a div{

display:none;

position: absolute;

margin-top:105px;

margin-left:133px;

}

a:hover div{

display:block;

}

.tip {

 padding:10px;

position:absolute;

top:0%;

left:0%;

width:300px;

height:300px;

margin-left:0px;

margin-top:0px;

text-align:center;



  opacity:0.8;

  filter:alpha(opacity=80);

}



.tip .body {

  color: #0075FF;

  background-color: #B5FF00;

  padding:5px 5px 5px 5px;

   border-radius:5px; 

  -moz-border-radius:5px;

  -webkit-border-radius:5px;

}

JavaScript

$(document).ready(function() {

    $('#about').click(function() {



        window.location.href = 'http://motyar.blogspot.com/2010/02/draw-rectangle-with-jquery.html';

    }

    )

    var x1, x2, y1, y2;

    $(document).mousedown(function(e) {

        $("#current").attr({
            id: ''
        })

        box = $('<div style="border:1px #FF00FF solid;position:fixed;">').hide();

        $(document.body).append(box);



        x1 = e.pageX;

        y1 = e.pageY;



        box.attr({
            id: 'current'
        }).css({

            top: e.pageY,
            //offsets
            left: e.pageX //offsets
        }).fadeIn();

    });

    $(document).mousemove(function(e) {

        $("#current").css({

            width: Math.abs(e.pageX - x1),
            //offsets
            height: Math.abs(e.pageY - y1) //offsets
        }).fadeIn();

    });



    $(document).mouseup(function() {

        $("#current").attr({
            id: ''
        })

    });



});