Подсветка кнопки
Я понимаю, вопрос глупый, наверняка уже задавался, так что сильно не бейте :)
В общем у меня есть некий контейнер в роли кнопки, с пиктограммой на нём в виде стрелочки. Я хочу при наведении мышкой менять картинку на стрелочку другого цвета. Привязываю обработчики. И всё бы хорошо, да вот только DIV воспринимает движение мышью по пиктограмме как уход указателя и срабатывает mouseOut. Пробовал смотреть координаты события через объект event (в IE), не вышло, потому что координаты DIV-а не поределились. Пытался также привязать идентичный обработчик к пиктограмме, но тут проблема в том, что из-за всплытия обработчик родителя срабатывает позже, и моя "коррекция" улетает в трубу. Насколько я знаю, в IE невозможно принудительно задать обратный порядок обработки (перехват). Что в таких случаях нужно делать? :( Есть правда мысль при вызове обработчика на картинке флажок ставить... но как-то вроде не вполне изящно) |
курить бамбук:D
|
Это делается через CSS. Javascript тут вообще ни к чему. :hover, :active в помощь.
.some-container .button {
background: url(../img/arraw.png) no-repeat 0 0;
}
.some-container .button:hover {
background-image: url(../img/arrow-active.png);
}
|
Спасибо, я думал так можно только со ссылками)
Теперь следующая проблема: я не могу поменять фон самой кнопки, так как прозрачная почти целиком кроме треугольника иконка становится фоном, и поэтому в CSS нельзя указать фоновый цвет; в результате всё кроме стрелочки получается белым. Пробовал заворачивать всю кнопку в дополнительный DIV, не помогает :( |
Я бы конечно мог сделать фоновую картинку больше, залить её серым фоном... Но это как-то кхм...(
К тому же, я изначально вообще не предполагал, что картинка будет фоном, а хотел внедрять её внутрь как изображение. |
А что в чем лежит? Можно HTML привести?
|
<table id="names">...</table> <div class="nav" id="prev"></div> <div id="marks"><table id="marksTable">...</table></div> <div class="nav" id="next"></div> Это классный журнал. Войти если интересно можно тут: http://popov654.pp.ru/livemarks/ Логин admin, пароль test |
Ну а картинка пока как бэкграунд к элементам #prev и #next...
|
Так а в чем проблема? Можно же одновременно указывать и цвет background-color, и фоновое изображение.
#next {
left: 96%;
background: *!*#DCDCDC*/!* url('next.png') no-repeat 0 33px;
}
|
А почему тогда не работает так?
.nav {
position: absolute;
display: block;
background-color: #BABABA;
top: 70%;
height: 60px;
width: 20px;
border: 1px solid #333333;
padding-top: 32px;
}
#prev {
left: 34%;
background:url('prev.png') no-repeat 0 33px;
}
#prev:hover{
background:url('prev2.png') no-repeat 0 33px;
}
#next {
left: 96%;
background:url('next.png') no-repeat 0 33px;
}
#next:hover{
background:url('next2.png') no-repeat 0 33px;
}
|
| Часовой пояс GMT +3, время: 20:12. |