|
1 2 3 4 5 6 7 8 9 10 11 |
$(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(); }); }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
#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; } |
|
1 2 3 4 5 6 7 8 9 |
<div style="width:600px; height:600px; background:#DEDEDE;"> <div class = "right-body" id="utilities" style="width:300px;"> <div class = "red-sub-header">Lorem Ipsum</div> <div class = "text">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</div> </div> <div id="gas-electric-hover"> <img src="http://comps.canstockphoto.com/can-stock-photo_csp2525879.jpg" width="110" height="110" alt="Gas and Electric Suppliers logos" /> </div> </div> |
