JSFiddle - React, Tailwind, and code Playground

by lid0

HTML

<div style="padding:20px;">
<div style="position:relative;float:left; margin-left:10px">
<a href="/category/feature" data-drop-close="true" class="badge-category" title="Discussion about features or potential features of Discourse: how they work, why they work, etc." style="width:35px;background-color: #76923C; color: #FFFFFF; ">howto</a>


</div>

<div style="position:relative;float:left;margin-left:10px;z-index:100">
<a href="/category/feature" data-drop-close="true" class="badge-category" title="Discussion about features or potential features of Discourse: how they work, why they work, etc." style="background-color: #0E76BD; color: #FFFFFF; ">feature</a>


<div id="m">
    <div style="position:absolute;top:10px;">
<a id="a" href="/category/support/l/new" class="badge new-posts badge-notification" title="4 new topics">5</a>
<a id="aa" href="/category/support/l/new" class="badge new-posts badge-notification" title="3 unread posts">3</a>
<a id="b" href="/category/support/l/new" class="badge new-posts badge-notification" title="4 new topics">8
</a>
    </div>
</div>
</div>


<!-- 2nd -->


<div style="position:relative;float:left; margin-left:10px">
<a href="/category/feature" data-drop-close="true" class="badge-category" title="Discussion about features or potential features of Discourse: how they work, why they work, etc." style="width:75px;background-color: #FE8432; color: #FFFFFF; ">extensibility</a>


</div>
    
    
</div>

CSS

#m {
    position:absolute;
    display:inline-block;
    /*background:#cfcfcf;*/
    width:300px;
    height:40px;
    top:-9px;
    left:50px;
    width:0px;
    
}
#a{
    left:0px;top:0px;
}
#aa{
    left:0px;top:0px;
}
#b{
    left:0px;top:0px;
    font-size:13px
}
.badge-notification.new-posts, .badge-notification.unread-posts {
    position:absolute;
    display: inline-block;
    background-color: #6cf;
    color: #fff;
    font-weight: normal;
    padding: 4px;
    font-size: 11px;
    line-height: 1;
    min-width: 11px;
    text-align: center;
    border-radius: 10px;
    -webkit-font-smoothing: subpixel-antialiased;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.badge-category{
    font: 14px/19px Helvetica,Arial,sans-serif;
    width:59px;
    display: inline-block;
    padding: 6px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    
    
    
  
}

JavaScript

var m = $("#m");
var a = $("#a");
var aa = $("#aa");

m.data("onHover","completed");

$("#m").hover(function (){
    if ( m.data("onHover") == "in" || m.data("onHover") == "out"  ){
        a.stop(true,true);
        aa.stop(true,true);
    }
    m.data("onHover","in");
    $("#a").show(); $("#aa").show();
    
    $("#a").animate({"left":"22px","top":"-10px","opacity":"1"}).html("5 New");
    $("#aa").animate({"left":"22px","top":"10px","opacity":"1"}).html("3 Unread");
    $("#m").css("width","80px");
    
},function(){
    console.log("out:",$(this).data("onHover"));
    if ($(this).data("onHover")=="out"){
        a.stop(true,true);
        aa.stop(true,true);
        //return false;
        
    }
    m.data("onHover","out");
    
    $("#a").animate({"left":"0px","top":"0px","opacity":"0"}).html("5 New");
    $("#aa").animate({"left":"0px","top":"0px","opacity":"0"},{complete:function (){
                                    
                                    //$("#a").hide(); $("#aa").hide();
                                    m.data("onHover","completed");
                                                }
                                                });
    $("#m").css("width","0px");
});