JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4650 x5090
2 Required Classes: English and Digital Media 3rd/Elective Class:  + Animation or Design or Film

Back to list of all examples

Useful Stuff About:

Mouse Following Div on Hover

This is an example of making a smaller div follow the mouse when hovering over a div.

Top Left
Top Right
Bottom Left
Bottom Right

You create a div with ANY content (.box and #box#) and then another div INSIDE (.popup and #popup#) your parent div with ANY content that will act as a popup. The CHILD div must have position:absolute.

 

HTML Code


<div id="boxes">
<div class="box" id="box1">Top Left
<div class="popup" id="popup1">1</div>
</div>
<div class="box" id="box2">Top Right
<div class="popup" id="popup2">2</div>
</div>
<div class="box" id="box3">Bottom Left
<div class="popup" id="popup3">3</div>
</div>
<div class="box" id="box4">Bottom Right
<div class="popup" id="popup4">
<div>4</div><!--This div allows for CCW rotation of number in the CW rotated popup-->
</div>
</div>
</div>

CSS Code


#boxes {
width: 400px;
height: 400px;
margin: 0 auto;
position: relative;
z-index: 100;
}
.box {
width: 198px;
height: 113px;
float: left;
background-color: #FC3;
position: relative;/*VERY IMPORTANT*/
text-align: center;
padding-top: 85px;
border: 1px solid #000;
cursor: pointer;
}
.popup {
position: absolute;/*VERY IMPORTANT*/
width: 100px;
height: 100px;
background-color: #0C9;
left: -600px;/*This value gets replaced in javascript so ANY number is OK*/
top: 0px;/*This value gets replaced in javascript so ANY number is OK*/
}
#popup1 {
background-color: #96F;
border-radius: 50px;
font-size: 3em;
text-align: center;
padding-top: 20px;
height: 80px;
}
#popup2 {
background-color: #399;
border-radius: 50px;
font-size: 3em;
text-align: center;
padding-top: 20px;
height: 80px;
width: 125px;
}
#popup3 {
background-color: #939;
font-size: 3em;
text-align: center;
padding-top: 20px;
height: 80px;
}
#popup4 {
background-color: #FF0;
font-size: 3em;
text-align: center;
padding-top: 20px;
height: 80px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
#popup4 div {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
margin-left: -10px;
}

jQuery Code

How do you do this? Paste the following JavaScript in the <head>


<script src="https://www.freestyleacademy.rocks/jquery/minified.js"></script>
<script src="projectX/scripts/pX-scripts.js"></script><!--Adjust as needed-->

Copy and paste this into your javascript file


var boxHovered, boxNumber, selector, targetedBox, adjustX, adjustY;
$(".popup").hide();//This hides all the pop-ups when page loads
$(".box").hover(function(){//This executes when you hover ON the box
boxHovered = $(this).attr("id");//Gets the id of the box such as "box1", "box2"
targetedBox = "#" + boxHovered;//creates a value of "#box1", "#box2", etc for future use
boxNumber = boxHovered.substr(3,5);//extracts the # from the id, such as 1, 2, 3
selector = "#popup"+boxNumber;//creates a value of "#popup1", "#popup2", etc for future use
$(selector).show();//This reveals the popup inside the hovered box
moveBox();//This calls on the function below to execute
},function(){//This executes when you hover OFF the box
$(selector).hide();//This hides the popup inside the hovered box
});
function moveBox(){
$(targetedBox).bind('mousemove',function(event){//Executes when the mouse MOVES
adjustX = $(this).find(".popup").outerWidth(true);//gets the width of the targeted popup
adjustY = $(this).find(".popup").outerHeight(true);//gets the height of the targeted popup
if(targetedBox == "#box1") {//example of moving popup relative to mouse
adjustX = $(this).find(".popup").outerWidth(true)-12;//creates a more unique value
adjustY = $(this).find(".popup").outerHeight(true)-12;
}
//event.pageY or evet.pageX = the mouse position relative to the top left of the targeted box
var my = event.pageY-$(this).offset().top-adjustY;//my = mouse y position with some adjustment relateive to top of box
var mx = event.pageX-$(this).offset().left-adjustX; //mx = mouse x position with some adjustment relateive to left of box
$(selector).css({//set the selected popup box coordinates near the mouse as the mouse moves
"left":mx,
"top":my
});
});