마우스를 올리면 배경을 변경하는 방법은 무엇입니까?

Question

이미지가 포함 된 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> 

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