0

画像を含む div がすべての div を塗りつぶし、その上にテキストが配置されています。マウスがコンテナー div の上にある場合、マウスはポインターに変わりますが (問題ありません)、画像は押されたように変わります。しかし、これは起こらなかったため、テキストは他のレイヤーを表しています。htmlとcssでこの問題を解決するのを手伝ってくれる人はいますか? 

<div style="float: right; width: 127px; height: 35px; background-color: rgba(139, 84, 164,.44); background-color: rgb(229, 230, 218); 
                    cursor:pointer; position:absolute;">

                    <div style="overflow: hidden; width: 87px;  height: 100%; float: right; position:absolute; z-index:2; background-color:#FF0099;
                                margin-left: 40px;">
                        <p class="para" style="color: rgb(0,178,192);  padding-top: 8px; padding-right: 5px;">اسم الملف</p>
                    </div>


                    <div style="position:absolute; z-index:1; ">
                        <img src="saba/playa.png" onMouseOver="this.src='saba/playao.png'" onMouseOut="this.src='saba/playa.png'"style="float: left;">
                    </div>

            </div>
4

1 に答える 1

0

よくわかんないけど..

しかし、これはあなたが作成したいものを示していると思います...

<div class="wrapper">
    <div class="text-div">
        some text
    </div>
    <div class="colored-button-on-hover"></div>
    <div class="clear"></div>
</div>

CSS:

.wrapper {
    width: 200px;
    height: 100px;
    background: #999;
    position: relative;
}

.wrapper .text-div {
    float: right;
    color: #000;
}

.wrapper .colored-button-on-hover {
    float: left;
    width: 30px;
    height: 25px;
    background: red;
}

/*on wrapper div hovered*/
.wrapper:hover {
    background: blue;
    cursor: pointer;
}

.wrapper:hover .text-div {
    color: #FFF;
}

.wrapper:hover .colored-button-on-hover {
    background: yellow;
}

.clear {
    clear: both;
}

jsfiddle のサンプルは次のとおりです: http://jsfiddle.net/AYjmF/

于 2013-09-30T14:05:51.697 に答える