-1

我有以下代码：

<!DOCTYPE HTML>
<html>
<head>
<title>What</title>
<style type="text/css">
#box1
    {
    position: relative;
    width: 300px;
    border: 1px solid black;
    box-shadow:  -3px 8px 34px  #808080;
    border-radius: 20px;
    box-shadow: -8px 5px 5px #888888;
    right: 100px; top:  50px;
    height:  150px;


}
    #box1:hover {

    }

@-webkit-keyframes myfirst
{
0%   { right:100px; top:50px;background: yellow;}

50%  {background:blue; right:700px; top:50px;}

100% { right:100px; top:50px; background: yellow}

}
    #stam {font-size: large;
           background: green;
           width: 100px;
           top: 400px;
           position: absolute;
    }
    #stam:hover { -webkit-animation:myfirst 5s;


    }
</style>
</head>
<body dir="rtl">

<div id="box1"></div>
  <div id="stam">1234567</div>
</body>
</html>

我的问题是：当我将鼠标放在“stam”div 上时，我该怎么做（没有 JS 更好） - “box1” div 会移动（将在代码中制作动画）？我添加了我的代码（这是行不通的）。希望得到帮助。谢谢！

4

2 回答 2

1

如果你#stam要追随你#box1，你可以使用~选择器 -演示

#box1:hover ~ #stam { -webkit-animation:myfirst 5s; }​
于 2012-11-30T19:55:51.787 回答
0

如果没有 JS，除非您更改元素的顺序/结构，否则您将无法做到这一点。

这是一些 jQuery 代码，它将为您（在 Webkit 浏览器中）做一些基本的动画，只需在关闭 DOM 之前将其放入您的 HTML 中：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
    $(document).ready(function(){
      $('#stam').on('mouseover', function(){
        $('#box1').css('-webkit-animation', 'myfirst');
        $('#box1').css('-webkit-animation-duration', '5s');
      })​;
    });
</script>
于 2012-11-30T20:10:38.317 回答