1

ある種のスライドショーを作成しています。画像にカーソルを合わせると、画像が拡大され、他の画像と重なります。しかし、これが発生した場合でも、拡大された画像の背後にある画像を、その領域にカーソルを合わせたときに機能させたいと考えています。

現在、ほぼ完全に機能しており、カーソルを合わせると展開された画像がちらつくだけです。私はそれをしたくありません。どうすればこれを解決できますか?

デモ

HTML:

<div id="expand">
    <div class="expand_1">
        <figure></figure>
    </div>
    <div class="expand_2">
        <figure></figure>
    </div>
    <div class="expand_3">
        <figure></figure>
    </div>
    <div class="expand_4">
        <figure></figure>
    </div>
</div>

CSS:

#expand {
    height: 200px;
}

.expand_1 {
    width: 100px;
    height: 200px;
    margin: 0;
    padding: 0;
    float: left;
}

.expand_1 figure {
    width: 100px;
    height: 200px;
    margin: 0;
    padding: 0;
    float: left;
    background: grey;
}

.expand_1 figure:hover {
    width: 400px;
    height: 200px;
    float: left;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background: grey;
}

.expand_2 {
    width: 100px;
    height: 200px;
    margin: 0;
    padding: 0;
    float: left;
}

.expand_2 figure {
    width: 100px;
    height: 200px;
    margin: 0;
    padding: 0;
    float: left;
    background: black;
}

.expand_2 figure:hover {
    margin-left: -100px; 
    width: 400px;
    height: 200px;
    float: left;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background: black;
}

.expand_3 {
    width: 100px;
    height: 200px;
    margin: 0;
    padding: 0;
    float: left;
}

.expand_3 figure {
    width: 100px;
    height: 200px;
    margin: 0;
    padding: 0;
    float: left;
    background: green;
}

.expand_3 figure:hover {
    margin-left: -200px; 
    width: 400px;
    height: 200px;
    float: left;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background: green;
}

.expand_4 {
    width: 100px;
    height: 200px;
    margin: 0;
    padding: 0;
    float: left;
}

.expand_4 figure {
    width: 100px;
    height: 200px;
    margin: 0;
    padding: 0;
    float: left;
    background-color: blue;
}

.expand_4 figure:hover {
    margin-left: -300px; 
    width: 400px;
    height: 200px;
    float: left;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background-color: blue;
}
4

1 に答える 1

2

ワーキングデモ

pointer-events: none;ちらつきの原因となります。また、古い IE ブラウザではサポートされていません。

divの代わりにカーソルを合わせるfigure:

.expand_1:hover figure
于 2013-10-13T16:18:06.630 に答える