CSS - изображение и наведение не работает правильно

Question

У меня есть изображение на странице, и при наведении курсора изображение должно отображаться другим цветом.Сам всплывающее окно работает, но исходное изображение находится поверх изображения при наведении.Я попытался установить Z-индекс, но не работает правильно.

Вот CSS:

    #login, #logout { 
float:left;
padding: 0px 10px; 
margin-left:5px;
margin-top:15px;
z-index:1;
}

#login:hover{
background:transparent url('../images/skin/loginhover.png') no-repeat 0px 0px;
float:left;
padding: 0px 10px; 
margin-left:15px;
margin-top:15px;
z-index:10;
}
#logout:hover{
background:transparent url('../images/skin/logouthover.png') no-repeat 0px 0px;
float:left;
padding: 0px 10px; 
margin-left:15px;
margin-top:15px;
z-index:10;
}

Спасибо за любую помощь и совет!

Answer 1

Могу ли я предложить вам использовать спрайты CSS вместо этого. Я считаю, что это гораздо более эффективный метод достижения того, чего вы хотите.

Вместо того, чтобы «заново изобрести колесо» и написать, как это сделать, посмотрите на http://sixrevisions.com/css/css-sprites-site-speed/ или просто Google «Спрайты CSS».

Они уменьшают HTTP-запросы и, следовательно, объем трафика, используемый вашим сайтом.

Надеюсь, это поможет. Если нет, прокомментируйте, и я постараюсь найти лучший вариант.

Cheers, Matthew

Answer 2

Вам лучше иметь исходное изображение и состояние наведения на одном элементе.Прямо сейчас оригинал представляет собой изображение, содержащееся в теге ссылки, поэтому он находится сверху.

Сделайте это

1. Удалите изображение

2. Добавитьэтот CSS для # login

   background: url("../images/skin/login.png") top left no-repeat;
   display: block;
   height: 26px;
   width: 80px;
   

3. Лучше иметь оба изображения на одном изображении (спрайт) и просто менять положение фона при наведении курсора.Это исключает мигание при загрузке изображения при первом зависании.См. Другой ответ Матфея об этом.

Answer 3

Если вы похожи на меня и не любите использовать спрайты:

Я придумал быстрый и простой способ получить тот же эффект (изображение исчезает, чтобы окрасить), единственный недостаток - вам нужен прозрачный PNG, но он прекрасно работает с большим количеством кнопок или значков социальных сетей.

HTML:

<div class="facebookicon">
    <a href="#!"><img src="http://example.com/some.png"></a>
</div>

CSS:

.facebookicon img {
    background: #fff;
    transition:  background 400ms ease-out;
}

.facebookicon img:hover {
    background: #3CC;
    transition:  background 400ms ease-in;
}
/* you need to add various browser prefixes to transition */
/* stripped for brevity */

Дайте мне знать, если вам это нравится.

Answer 4

удалите курсор при наведении курсора и измените изображение на это:

<img height="26" width="80" alt="LOGIN" src="/images/skin/login.png" onmouseover="switchImageIdOver(this,'../images/skin/loginhover.png');" onmouseout="switchImageIdOut(this,'/images/skin/login.png'); />

и добавьте этот скрипт на свою страницу:

function switchImageIdOver(elem, imgPath) {
elem.src = imgPath;
}
function switchImageIdOut(elem, imgPath) {
elem.src = imgPath;
}