Css 转换 - 每次鼠标移出和移入时触发事件 div

Question

我有两个问题。

在我的项目中，我将在此 post 中包含代码，我想要：

当我将鼠标悬停在蓝色方块上时应该会触发变换。
如果鼠标在红色矩形区域或红色正方形中，方块不应该return到第一个位置，只有在两个div之外时。

希望你明白。

#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>

Answer 1

我会用一个容器来装你的蓝色方块。
这个容器将是触发的事件，并且在初始时将与正方形具有相同的大小。
悬停时，它的大小会加倍以适合红色矩形。
这样，动画确实只从方形区域触发，然后在全局矩形上进行鼠标检测。

另一个棘手的部分是反向动画。当鼠标离开区域时，我会在方形容器（更长的一个）上使用第二个动画，以在鼠标回到红色部分时保持最大区域仍然可用。当正方形回到它的原始点时会发生这种情况。

所以我会使用 css 动画，但仅当鼠标未在方形容器上时才可用。希望下面的代码自己会说话。

注意我把方形容器的底色设置为绿色，大家可以看出其中的窍门。当然是要去掉了。

HTML

<!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-cont">
   <div id="square" class="animation">
</div>
</div>

</div>

</body>
</html>

CSS

#square {
    position: absolute;
    width:100px;
    height:100px;
    background-color:blue;
}
#square-cont {
    width:100px;
    height:100px;
    background-color:green;
    -webkit-transition: width 5s ease-in-out; /** Chrome & Safari **/
    -o-transition: width 5s ease-in-out; /** Opera **/
    -moz-transition: width 5s ease-in-out; /** Firefox **/
}

#rectangle {
    width:200px;
    height:100px;
    background-color:red;
}

#square-cont:hover #square {
    transform: translate(100px,0);
    -webkit-transform: translate(100px,0); /** Chrome & Safari **/
    -o-transform: translate(100px,0); /** Opera **/
    -moz-transform: translate(100px,0); /** Firefox **/
}
#square-cont:hover{
    width: 200px;
     -webkit-transition: none; /** Chrome & Safari **/
    -o-transition: none; /** Opera **/
    -moz-transition: none; /** 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 **/
}

Answer 2

在这里你可以看到。 http://jsfiddle.net/srinivashappy/10ov411e。使用关键帧。

检查上面

<div id="rectangle" class="animation">
    <div id="square" class="animation"></div>
</div>

css

#square {
    position: absolute;
    width:100px;
    height:100px;
    background-color:blue;
    transform: translate(100px, 0);
    /** Chrome & Safari **/
}
#rectangle {
    width:200px;
    height:100px;
    background-color:red;
}
#rectangle:hover #square {
    animation: animationFrames 0.8s Infinite;
    transform: translate(0, 0);
    /** Chrome & Safari **/
}
@keyframes animationFrames {
    0% {
        transform: translate(10px, 0);
    }
    10% {
        transform: translate(20px, 0);
    }
    20% {
        transform: translate(40px, 0);
    }
    30% {
        transform: translate(60px, 0);
    }
    40% {
        transform: translate(80px, 0);
    }
    50% {
        transform: translate(100px, 0);
    }
    60% {
        transform: translate(80px, 0);
    }
    70% {
        transform: translate(60px, 0);
    }
    80% {
        transform: translate(40px, 0);
    }
    90% {
        transform: translate(20px, 0);
    }
    100% {
        transform: translate(10px, 0);
    }

Css 转换 - 每次鼠标移出和移入时触发事件 div

Css Transform - Trigger event each time the mouse is out and in of a div

html

css

transform