как изменить фон при наведении мышки?

Question

как изменить фон при наведении мышки?

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>

A.J 30 сен. 2013, в 15:27

Источник

Теги:

html

hover

layer

1 ответ

Ещё вопросы

goldJ · Answer 1 · 2013-09-30T11-29-00.000Z

Я не уверен, насколько хорошо понимаю.

Но я думаю, что это показывает, что вы хотите создать...

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

это именно то, что я хочу, большое спасибо