JSFiddle - React, Tailwind, and code Playground

by pramendra

HTML

<!DOCTYPE html>
<html>
<head>
    <title>JQuery Zoom Hover</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <div style="height:100px;">asdf</div>
    <a href="#" class="contact_us">
        03-5212-2221
        <div class="inner">
            Order By Phone <br/>
            03-5212-2221 <br/>
            Mon-Fri 10:00AM - 6:00PM
        </div>
    </a>
</body>
</html>

CSS

.contact_us{
    width:200px;
    margin-left:200px;
    display:block;
    position:relative;
    background:#ddd;
}
.contact_us:hover{
    background: #eee;
}
.contact_us .inner{
    display:none;
    position:absolute;
    top:0;
    left:0;
    background:#fff;
    border:1px solid #eee;
    font-size:14px;
    ___width:inherit;
    padding:5px;
}

JavaScript

$(document).ready(function() {
    $("a.contact_us").hover(function() {
        $(this).find('.inner').css("z-index", 1).animate({
            right: "0",
            top: "0"
        }, "slow", function() {
            $(this).fadeIn('fast');
        });

    }, function() {
        $(this).find('.inner').css("z-index", 0).animate({
            right: "0",
            top: "-5"
        }, "fast", function() {
            $(this).fadeOut('fast');
        });
    });
});