-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になろうとしているなら、あなたはセレクターを使うことができます- DEMO#box1~

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

要素の順序/構造を変更しない限り、JS がなければそれを行うことはできません。

これは、いくつかの基本的なアニメーションを (Webkit ブラウザーで) 実行する jQuery コードです。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 に答える