«
»

2013, css, jquery

Muestra un div haciendo hover con posición event.pageX – event.pageY.

07.23.13 | Comment?

Alberto Suárez Pérez
$(document).ready(function(){
    $('#utilities').mousemove(function(event) { 
        var left = event.pageX - $(this).offset().left + 50;
        var top = event.pageY - $(this).offset().top + 50;
            $('#gas-electric-hover').css({top: top,left: left}).show();
            console.log (left, top);
         });
         $('#utilities').mouseout(function() {
             $('#gas-electric-hover').hide();
            });
        });
#utilities {
    cursor:pointer;
}

#gas-electric-hover {
    display:none;
    background-color: #fff;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.2);
    behavior: url(/PIE.php); /* CSS3Pie hack for IE6/7/8 */
    border: 2px solid #BBB;
    width:110px;
    height:110px;
    color: #333;
    font-family: 'FrutigerRegular';
    position:absolute;
    top:180px;
    left:250px;
    z-index:10002;
}

Lorem Ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
Gas and Electric Suppliers logos

Comments are closed.


«
»