1

スライディングエフェクトを作成したいと思います。横に配置された2つのdivがあります。ホバリングdiv id="left"すると、右にスライドして非表示になりますdiv id="right"。周りにはマウストラッカーのようなものがあり、ホバーして非表示にできる追加の場所のためにdiv id="left"周囲にスペースを追加します。私が何を意味するかを示すために例を作成しました：div id="left"div id="right"

例

以下は HTML です。

<div id="main">
    <div id="tracker">
        <div id="left">slides right</div>    
        <div id="right">should disappear only when hover red div</div>  
    </div>
</div>

そして、スライド効果の CSS:

/*Sliding Effects:*/
#tracker:hover #left {
    margin-left: 150px;
    position: absolute;
    -webkit-transition-duration: 2s;
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
}
#tracker:hover #right {
   visibility:hidden;
}
#tracker:hover {
   width: 400px;
   height: 200px;
   margin-top: -25px;
   padding-top: 25px;
}

ここでの問題は、ホバリングしても効果が開始されることdiv id="right"です。だから私はまだこの問題を解決する方法を知りません。

私を助けてくれる人がいたら本当にありがたいです。

4

2 に答える 2

2

div#right子なのでホバリングしてもエフェクトが起動div#trackerし、ホバーエフェクトは親まで泡立っています。

css のみを使用して目的を達成するには、DOM の位置を変更する必要があります。あなたの例を使用して、それを機能させるために以下を変更する必要がありました：

  • div#right今はdiv#tracker兄弟です
  • #tracker, #left, #rightdiv 要素が絶対配置になりました
  • はdiv#right兄弟であり、の子ではないためdiv#tracker、次の css セレクター #tracker:hover #right { }を次のように変更しました#tracker:hover + #right { }

デモ（例を使用）

于 2013-04-12T11:21:40.700 に答える
0

わかりましたので#left-outer、同じ幅と高さのコンテナをその周りに追加して (overflow:hidden;

この例を参照してください: http://jsfiddle.net/N4X5P/

お役に立てれば幸いです！

于 2013-04-12T10:05:47.240 に答える