如何更改鼠标悬停的背景？答案

【问题标题】：how to change background on mouse hover?如何更改鼠标悬停的背景？
【发布时间】：2013-09-30 12:51:54
【问题描述】：

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

【问题讨论】：

标签： html hover layer

【解决方案1】：

我不确定我是否理解得很好..

但我认为这显示了您想要创建的内容...

<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/

【讨论】：