calc

dic

by Dimas Polyakov

HTML

<!DOCTYPE HTML>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script type="text/javascript" src="js.js"></script>
  <link rel="stylesheet" href="style.css">
  <title></title>
  </head>
  <body>
    <div class="wrapper">
      <div class="calc" id="cursor-position">
        <div class="step1" id="variant1"></div>
         <div class="hint" id="hint-variant1"></div>
        <div class="step1" id="variant2"></div>
         <div class="hint" id="hint-variant2"></div>
        <div class="step1" id="variant3"></div>
         <div class="hint" id="hint-variant3"></div>
      </div>
      <div class="clear"></div>
      <div id="reset"></div>
      <p id="p2"></p>
      <p></p>  
    </div> 
  </body>
</html>

CSS

/* CSS Document */
.step1 {
  float:left;
  width:120px;
  height:70px;
  outline:1px solid black;
  margin-left:20px;
  cursor:pointer;
}
.wrapper {
  width:100%;
}
.calc {
  width:100%;
  margin: 50px auto; 
  position:relative;
}
.active {
  background-color:red;
}
.clear {
  clear:both;
}
.hint {
  width: 350px;
  height:80px;
  background-color:green;
  display:none;
  position:absolute;
  opacity:0;
}
#reset {
  width: 50px;
  height: 20px;
    background-color: aqua;
}

JavaScript

// JavaScript Document
$(function(){
      $(".step1").click(function () { 
        $(".step1").each(function (i) {
         $(this).removeClass("active");
        $('#hint-variant1').css('opacity','0');    
      });
      $(this).addClass("active");
      });
      
       
       $(".step1").mousemove(function (pos) {
        var marPosX = pos.pageX,
            marPosY = pos.pageY;
        $(this).next().show().animate({ opacity : '1' }, 300).css({'marginLeft': marPosX + 20, 'marginTop':marPosY - 150});  
          
         $("p").html('По оси X:'+pos.pageX+', По оси Y:'+pos.pageY); 
        });
        $(".step1").mouseout(function () {
            marPosX = 0,
            marPosY = 0;
            $(this).next().removeAttr('style').css('opacity','0').animate({ opacity : '0', function() {console.log( "done!" );} }).removeAttr('style');
             marPosX = 0,
            marPosY = 0;
        });
        $("#reset").click(function () {
            $("#p2").html('По оси X:'+marPosX+', По оси Y:'+marPosY);
            $(".hint").css('opacity','0').animate({ opacity : '0', function() {console.log( "done!" );} });
        });
});