1

次のように、ユーザーがウィンドウ (body 要素) にカーソルを合わせるとアニメーションがトリガーされるデザインがあります。

body:hover .block1 {
width: 210px;
transition: width .2s;
}

.block1 には position:absolute 属性があり、コンテナー内にあります (これも絶対です)。ページには、position:relative を持つ別の div (.parent) が 1 つあります。したがって、.container と .parent という 2 つの主要な div があります。

体にカーソルを合わせるとアニメーションが始まります。ただし、たとえば、2 つの div の間やコンテナーの右マージンなど、特定の部分にカーソルを合わせると、アニメーションが停止します。これは、体の上に「ホバー」として読み取られないためです。それはページの周りのいくつかの小さなスペースにのみあり、一見ランダムに見えます. ここで何が起こっているのですか？

4

2 に答える 2

1

ブロック 1 からマウスを移動すると、アニメーションが停止します。これは、まだ「ホバー」していないためです。

この状況の解決策はjavascriptのみです

 $(".block1").mouseenter(function() {
      $(this).addClass('active')
}).mouseleave(function() {
 // you can enter code here if the mouse out of the .block1
});

CSS

.active {
 width: 210px;
 transition: width .2s;
}
于 2013-07-21T09:41:37.153 に答える