Блог

Работает одна кнопка опрокидывания. Кнопки опрокидывания правильно выполнены с помощью Photoshop (разделите верхнее и нижнее изображение). Пример: https://www.studio61.be/home-en.html#tarieven Однако, когда я хочу иметь три смежные (левые плавающие) кнопки в одном div, отображается только последняя. Две невидимые кнопки работают при наведении на них, но они не отображаются. Что случилось?

HTML:

 <div id="talen">
    <p class="taal-en"><a href="home-en.html">Klik hier<span>Welcome</span></a></p>
    <p class="taal-fr"><a href="home-fr.html">Klik hier<span>Bienvenu</span></a></p>
    <p class="taal-nl"><a href="index.html">Klik hier<span>Welkom</span></a></p>
    
     </div>
 

CSS:

 .taal-nl {
    display:block;
    width:75px;
    height:25px;
    text-indent:-9999px;
    margin-left: 25px;
    float: left;
}
.taal-nl a {
    display:block;
    width:100%;
    height:100%;
    outline:none;
    background: transparent url(../images/buttons/welkom_v3.gif) no-repeat left top;
    float: left;
}
.taal-nl a:hover {
    background-position:0 -25px;
}
.taal-en {
    display:block;
    width:75px;
    height:25px;
    text-indent:-9999px;
    margin-left: 25px;
    float: left;
}
.taal-en a {
    display:block;
    width:100%;
    height:100%;
    outline:none;
    background: transparent url(../images/buttons/welcome_v3.gif) no-repeat left top;
    float: left;
}
.taal-en a:hover {
    background-position:0 -25px;
}
.taal-fr {
    display:block;
    width:75px;
    height:25px;
    text-indent:-9999px;
    margin-left: 25px;
    float: left;
}
.taal-fr a {
    display:block;
    width:100%;
    height:100%;
    outline:none;
    background: transparent url(../images/buttons/bienvenu_v3.gif) no-repeat left top;
    float: left;
}
.taal-fr a:hover {
    background-position:0 -25px;
}
 

Я только что добавил другое фоновое изображение к вашей кнопке, и теперь оно работает отлично.

Смотрите свой рабочий код здесь

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