Как сделать переключение изображения без мерцания при наведении курсора только с помощью CSS?

Question

Код выглядит следующим образом:

<div id="compv-navbar">
        <a href="#"><img src="image1.png" id="icon1"></a> | 
        <a href="#"><img src="image2.png" id="icon2"></a> | 
        <a href="#"><img src="image3.png" id="icon3"></a> | 
        <span id="view_name"> Random Text</span>
 </div>

Предположим, что у каждого изображения есть другое изображение с суффиксом '-hover', которое будет изображением, которое будет заменено при наведении.

Answer 1

Вот что я бы сделал:

<div id="compv-navbar">
        <a href="#" id="icon1"></a> | 
        <a href="#" id="icon2"></a> | 
        <a href="#" id="icon3"></a> | 
        <span id="view_name"> Random Text</span>
</div>

a#icon1{
background:url("image1.png") no-repeat;
}
a:hover#icon1{
background:url("image1-hover.png") no-repeat;
}
a#icon2{
background:url("image2.png") no-repeat;
}
a:hover#icon2{
background:url("image2-hover.png") no-repeat;
}
a#icon3{
background:url("image3.png") no-repeat;
}
a:hover#icon3{
background:url("image3-hover.png") no-repeat;
}

Answer 2

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

HTML

<div id="compv-navbar"> 
        <a href="#"><span id="icon1"></span></a> |  
        <a href="#"><span id="icon2"></span></a> |  
        <a href="#"><span id="icon3"></span></a> |  
        <span id="view_name"> Random Text</span> 
 </div>

CSS

#icon1
{
    width:100px; /*Change this to your image width*/
    height:100px; /*Change this to your image width*/
    background-image:url("image1.png");
}

#icon1:hover
{
    width:100px; /*Change this to your image width*/
    height:100px; /*Change this to your image width*/
    background-image:url("image1-hover.png");
}

(Обязательно добавьте это для каждого изображения.)

Answer 3

Ну, совершенно без мерцания переключатель изображения вы можете сделать только с предварительной загрузкой изображения. В любом другом случае браузер будет загружать только изображение при наведении. Я написал небольшой пример о переключении изображений.

Другим решением является использование CSS-спрайтов и переключение изображения при наведении курсора с помощью background-position.