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 回答