JSFiddle - React, Tailwind, and code Playground

by Komlan

HTML

<ul>
    <li><a href="allo" >ALLO</a></li>
    <li><a href="allo1" >ALLO1</a></li>
    <li><a href="alllo2" >ALLO2</a></li>
</ul>    
<img src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg" alt="lol" width="50px" id="google" height="50px"/>

<input type="button" id="click" value="Click"/>

CSS

li{
    display:inline;
    padding-right:10px      
}
img{
    position:absolute;
    left:5px;
    top:0px;
    z-index:-1;
}

JavaScript

$('li').mouseover(function(){
    var pos = $(this).position();
  //  alert(pos.left);
    $("#google").animate({
        left: pos.left},"fast");   
});

$(document).ready(function(){
var pos = $('a[href="allo"]').position();
     $("#google").css("left",pos.left);
    $('body').css("background-color","red");
});

$("#click").click(function(){
    alert($('a[href="allo1"]').text());
});