3

ですから、私はHTMLやCSSなどの初心者であり、jQueryとJavaScriptを学ぼうと試みましたが、まだ成功していません。とにかく、ある場所にカーソルを合わせて別の場所でdivをトリガーしたかったので、隣接する兄弟コードを使用しましたが、問題は、イベントがトリガーされた後、マウスを動かすと必要なボックスがそこにあることです。 、マウスを離すまで「ホバー」要素に留まるのではなく、再度トリガーします。これを修正する方法はありますか？

これは、CSSの隣接する兄弟要素の部分です。

.b:hover ~ .a {
  position:absolute;
  height:1000%;
  width:100px;
  margin-top:-1000px;
  margin-left:100px;
  background-color:#b6c9e7;
  z-index:1000;
  opacity:1;
  transition:  all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  -webkit-transition:  all 0.4s ease-in-out 0s;
  -o-transition:  all 0.4s ease-in-out 0s;
  -webkit-animation-duration: 2s;
}​

これが私のコードです：JSFiddleで

助けていただければ幸いです！

4

1 に答える 1

3

zindexがオフになっています。マウスを動かすと、実際にはbではなくロールオーバーします。ホバー状態のbであるため、ロールアウトを固定し、位置をリセットします。aをbの後ろに設定すると、希望どおりに機能します。

z-index:999;

http://jsfiddle.net/2g2uY/

zindexは基本的にスタック番号であるため、zindexが高いものは、別の要素の前にあることを意味します。これは、要素がオーバーレイする場合、絶対的かつ比較的配置された要素を使用する場合にのみ実際に機能します。

また、：hoverセレクターを使用する場合、変更しない要素を再定義する必要はありません。それらはすべて継承されます。ホバー状態で異なる属性のみを変更します。

于 2012-10-19T01:18:20.827 に答える