2

半透明の div 要素の上に背景画像を使用しようとしています。どちらかにカーソルを合わせると背景色が変わります。ただし、いずれかの要素の上にマウスを移動すると、ちらつき効果が発生します。

<div class="container">
  <div class="test"></div>
  <div class="first box"></div>
  <div class="third box">third</div>
  <div class="second box">second</div>
  <div class="fourth box">fourth</div>
  <div class="last box">last</div>
</div>

CSS:

html, body, 
.container {
    height: 100%; 
    min-height: 100%;
}

.box {
    width: 191px;
    height: 145px;
    margin: 4px;
    float: left;
    background-color: black;
}

.box:hover{
    background-color:#EF6939;
    opacity: 1;
    overflow: hidden;
}

.test:hover{
    background-color:#EF6939;
    overflow: hidden;
}

.test {
    width: 191px;
    height: 145px;
    margin: 4px;
    float: left;
    position: absolute;
    /*  background-image: url(test.png);*/
}

.first {
    /* float: left; */
    /* background-color: red; */
    opacity: 0.1;
}

.second{
    /*     float: left;*/    
    /* background-color: green; */
}

.third{
    /* float: right; */
    /*  background-color: blue; */
}

.fourth {
    /* float: right; */
    /*  background-color: #DDDDDD; */
}

.last{
    /* float: right; */
    /*  background-color: yellow; */
}

ここに私のコードへのリンクがあります: http://jsfiddle.net/YTDyL/

4

3 に答える 3

5

どのような目的にdiv.test役立ちますか?

div.first問題は、絶対に配置されているため、重なっているということです。div.test目的の効果によっては、おそらく内側に移動する必要がありますdiv.first(またはその逆)。position: absolute;コンテナーが要素を保持する場合は、コンテナーを配置する必要があります (相対または絶対またはその他) 。

両方の要素が:hover重複しているため、 をめぐって競合しています。したがって、ちらつき（:hoverマウスの動きに応じて、一方が得られ、もう一方が失われ、また元に戻ります）。

jsfiddle.net/YTDyL/1

于 2013-07-10T17:29:00.943 に答える