i have two questions.
In my project that i will include the code in this post i want:
- The transform should trigger when i hover on blue square.
- The square should not return to the first position if the mouse is in the red rectangle area or red square, only when is out of the two divs.
I hope you understand.
#square {
position: absolute;
width:100px;
height:100px;
background-color:blue;
}
#rectangle {
width:200px;
height:100px;
background-color:red;
}
#square:hover {
transform: translate(100px,0);
-webkit-transform: translate(100px,0); /** Chrome & Safari **/
-o-transform: translate(100px,0); /** Opera **/
-moz-transform: translate(100px,0); /** Firefox **/
}
.animation {
position: absolute;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Teste1 </title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="rectangle" class="animation">
<div id="square" class="animation">
</div>
</div>
</body>
</html>
I would use a container for your blue square.
This container would be the event triggered, and at init would have the same size as the square.
When hovered, its size would double to fit on the red rectangle.
This way, the animation is indeed triggered only from the square zone, and then, mouse detection is performed on the global rectangle.
The other tricky part is the reverse animation. When mouse leaving zone, I would use a second animation on the square container (longer one) to keep largest zone still available if the mouse get back to the red part. This occurs when square is getting back to its original point.
So I would use css animation, but only available when the mouse is not over the square container. Hope the following code will speak by itself.
Note that I set the background color of the square container to green, so you can see the trick. It has to be removed of course.
HTML
CSS