0

DIVアンカー タグのホバー状態に基づいてアニメーション化しようとしていますが、何も起こりません。誰かが私が間違っている場所を教えてもらえますか? 一番下にデモ。

.blue {
    background-color: aqua;
    display:block;
    width:100px;
    height:100px;
    position:absolute;
    margin-top:100px;
    -webkit-transition(margin-top 2s ease-in);
 }
a.yellow {
    background-color: yellow;
    display:block;
    width:100px;
    height:100px;
    position:absolute;
    margin-top:0px;
    -webkit-transition(margin-top 2s ease-in);
}
a.yellow:hover + .blue {
    -webkit-transition(margin-top 2s ease-in);
    margin-top:400px;
}

</p> 

  <nav>
     <a class="yellow" href="#">YELLOW</a> 
  </nav>

  <div class="blue"></div>

デモ: http://jsfiddle.net/liquidengine/btztS/

4

2 に答える 2

0

私の知る限り、css の + は最初の兄弟を選択します。私はそれがあなたがやろうとしていることをするとは思わない.

jquery を使用して jsfiddle で onclick の背景色を変更する例を次に示します。

CSSを変更するためのJqueryスニペット

$(".yellow").hover(function () {
    $(".blue").css("margin-top","300px");
    $(".yellow").css("margin-top","400px");
});​

http://jsfiddle.net/btztS/8/

また、コーディング スタイルを多少更新する必要があると思います。blue と yellow という名前の classe は、デモであっても、実際には存在しないはずです。さらに、CSS では、実際には 16 進数または RGB を使用して色を参照する必要があります。

これがおそらくあなたが望むコードです...

http://jsfiddle.net/btztS/7/

.blue {
    background-color: aqua;
    display:block;
    width:100px;
    height:100px;
    position:absolute;
    margin-top:100px;
    -webkit-transition(margin-top 2s ease-in);
}

a.yellow {
    background-color: yellow;
   display:block;
   width:100px;
   height:100px;
   position:absolute;
   margin-top:0px;
   transition: margin-top 2s;
   -moz-transition: margin-top 2s; 
   -webkit-transition: margin-top 2s; 
   -o-transition: width 2s; 
}

a.yellow:hover {
     margin-top:400px;
}​
于 2012-11-28T22:23:53.797 に答える
0

これを行うことができるのは、ホバーしたい要素の中に移動したい要素を配置した場合のみです。

お気に入り：

<nav>
  <a class="yellow" href="#"><div class="blue"></div>YELLOW</a>
</nav>

そしてCSS：

.blue {
    background-color: aqua;
    display:block;
    width:100px;
    height:100px;
    position:absolute;
    margin-top:100px;
    -webkit-transition:margin-top 2s ease-in;
}
a.yellow {
    background-color: yellow;
    display:block;
    width:100px;
    height:100px;
    position:absolute;
    margin-top:0px;
    -webkit-transition:margin-top 2s ease-in;
}
.yellow:hover .blue {
    margin-top:400px;
}
于 2012-11-28T23:27:02.693 に答える