0

テキストが含まれているdivがあり、「ホバー中」に、別のテキストを含む別のdivを表示したいと思います。

問題は、最初のdivから2番目のdivまでのテキストが届き、すべてが混ざり合っているように見えることです。2番目のdivで最初のdivを完全にカバーしたいと思います。

これがjsfiddleです

HTML

<div class="outer_box">
        <div class="inner_box">
            Main</div>
            <span class="caption">Caption</span>
</div>

CSS

.outer_box {
    width:100px;
    height:100px;
    background-color:orange;

}

.inner_box{
    width:100px;
    height:100px;
    position:absolute;

}

.caption {
    width:100px;
    height:100px;

    background:black;
    color:rgba(255,255,255,1);
    opacity:0;
}

.outer_box:hover .caption{
    opacity:1;
}

ありがとう！

4

3 に答える 3

1 
.inner_box:hover {
    opacity: 0.0;
}
于 2013-02-07T08:17:20.933 に答える
1

これをCSSに追加します。

.outer_box:hover, .inner_box:hover {
    opacity:0;
}

お気づきの方もいらっしゃると思いますが、外側のボックスを内側のボックスよりも大幅に大きくすることを意図していた場合に備えて、.outer_box：hoverセレクターを含めるようにしました。

不透明度プロパティの動作に関するさらに役立つ情報は、次の場所にあります：http ://www.w3schools.com/cssref/css3_pr_opacity.asp

于 2013-02-07T08:19:46.520 に答える
1

ホバーすると消えるように、最初のdivのテキストのスタイルを設定する必要があります。

.inner_box:hover .text {
  visibility:hidden;
}
于 2013-02-07T08:19:51.503 に答える