0

次のHTMLでは、の初期位置.layerはに設定されtop: -100%ています。divにカーソルを合わせると変更します.image。次のコードを試していますが、ホバーしても何も起こらないようです。

HTML：

<div class="box">
    <div class="image">
        <a href="#"><img src="http://farm9.staticflickr.com/8356/8332233161_18e3a75de0_m.jpg" ></a>
    </div>
    <div class="layer">Hide it first, show on hover over image</div>
     <div class="other">other</div>
</div>

CSS：

.box{
    border: 1px solid red;
    width: 240px;
}

.box .image{
    position: relative;
    overflow: hidden;    
}

.box .layer{
    width: 240px;
    height: 146px;
    background: green;
    position: absolute;
    top: -100%;
}

.box .image:hover .layer{
    top: 0  
}

JSFiddle： http: //jsfiddle.net/pY9jx/

4

2 に答える 2

6

問題は、使用していたセレクターでした。要素間のスペースは、2番目の要素が前者の子孫であることを意味しますが、この場合、要素は隣接する兄弟であり、+コンビネーターを使用して記述された関係です。したがって：

.image:hover + .layer,
.layer:hover {
    top: 0  
}

JSフィドルデモ。

適用するルールも定義した理由は、がカーソルの下に置かれたときに発生するちらつき.layer:hoverを回避するためです。これにより、セレクターの適用が停止します（つまり、「途中で」）。.layer.layer:hover.layer

参照：

于 2013-01-01T12:02:18.740 に答える
1

ホバー状態のスタイルルールがに適用され.box .image:hover .layerます。これは、クラスlayerの要素内にネストされているクラスの要素に適用されることを意味しimageます。ただし、現在のコードでは、layer要素は要素内にネストされていませんimage。

これを解決するには、次のようlayerに要素を要素に移動するだけです。image

<div class="box">
<div class="image">
    <a href="#"><img src="http://farm9.staticflickr.com/8356/8332233161_18e3a75de0_m.jpg" ></a>
    <div class="layer">Hide it first, show on hover over image</div>
</div>
<div class="other">other</div>

ここで実際にテストしてください：http：//jsfiddle.net/pY9jx/3/

于 2013-01-01T12:07:16.273 に答える