0

次のdiv制限があります。

<div class="profile_outer>
   <div class="profile"></div>
</div>

そして、次のCSS

.profile_outer {
    border: 2px solid #660000;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}

.profile {
    width: 198px;
    height: 225px;
    border: 1px solid #660000;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    z-index: 100;
 }

 .profile_outer:hover {
background-color: blue;
 }

ここでフィドルを見つけることができます

両方の div には背景がありません。背景は親 div の画像によって決まります。だから彼らは透明です。

したがって、ホバーすると、外側のプロファイルの背景を変更したいだけです。を使用して内側の div の背景色も変更した場合にのみ機能します

.profile_outer:hover .profile {
display: block;
background : #fff; // but I do NOT want to change the background
}

これらの次の組み合わせを試しました。

.profile_outer:hover .profile {
display: block;
background : none !important;
    background-color:transparent;
}

ご協力いただきありがとうございます。

4

3 に答える 3

2

まあ、あなたが望む効果はこれだと思います

.profile_outer {
    border: 2px solid #660000;
    border-radius: 5px;
    overflow: hidden;
}

.profile {
    width: 198px;
    height: 225px;
    border: 1px solid #660000;
    border-radius: 5px;
    z-index: 100;
 }

 .profile:hover {
    box-shadow: 0px 0px 0px 1000px blue;
 }

フィドル

...しかし、透明性についての考えを確認する必要があります...

質問を読み直した後、Moob の提案は正しいと思います。質問に対する答えは

.profile_outer:hover .profile {box-shadow: 0px 0px 0px 1000px blue;}
于 2013-11-09T22:34:53.953 に答える
0

この効果を得る方法は他にも 1 つありますが、実装するのは非常に面倒です。完全を期すためのソリューションとしてのみ提供しています。事実上、マスクされているように見えるはずのビットに同じ背景画像があります。

body {
    margin:0px;
    background:#fff url('http://lorempixel.com/output/cats-q-c-640-480-5.jpg') 0 0 repeat;
}
.profile_outer {
    margin:20px; /* added this just to show that you'd need to offset the image placement in .profile depending on its position */
}
.profile {
    background:#fff url('http://lorempixel.com/output/cats-q-c-640-480-5.jpg') -20px -20px repeat;
}

http://jsfiddle.net/PdQFJ/1/

于 2013-11-09T22:57:56.793 に答える
0

子の背景を #fff に設定すると機能します。

すべての要素のデフォルトの背景色が透明であるため、問題が発生します

于 2013-11-09T11:44:40.997 に答える