Html 如何更改鼠标悬停时的背景？

我有一个包含图像的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>

我不确定自己是否理解清楚

但我认为这显示了你想要创造什么

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

以下是JSFIDLE示例：

.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;
}