Почему мои наведенные изображения не выравниваются в HTML
У меня есть два изображения для каждой кнопки на моем сайте: одно — базовая версия кнопки, а другое — при наведении на нее курсора.
изображение при наведении на мою кнопку «блог» отображается поверх кнопки над ней. (на изображении ниже я сделал кнопку прозрачной на 50%, чтобы вы могли видеть проблему) (https://i.sstatic.net/Hn98U1Oy.png)
(я знаю, что этот код не очень хорош, я начал изучать только 4 дня назад и пока только создаю этот тестовый сайт)
Я пробовал следовать нескольким различным онлайн-руководствам, но застрял в том, как решить эту проблему.
.buttonlinks {
width: 300px;
height: 30px;
position: relative;
}
.buttonlinks img{
width: 100%;
height: 100%;
}
.aboutmehover {
position: absolute;
left:0;
top:0;
opacity: 0;
transition: all .3s ease-in-out;
}
.aboutmehover:hover {
opacity:1;
}
.bloghover {
position:absolute;
top:0;
left:0;
opacity: 0;
transition: all .3s ease-in-out;
}
.bloghover:hover {
opacity:1;
}
.interestshover {
position: absolute;
left:0;
top:15;
opacity: 0;
transition: all .3s ease-in-out;
}
.interestshover:hover {
opacity:1;
}<!doctype html>
<html lang = "en">
<head>
</head>
<body>
<!-- Left Section -->
<div class = "column left" style = "background-color: rgba(125, 77, 77, 0)">
<div class = "buttonlinks">
<!-- LEFT SIDE BUTTON LINKS -->
<a href = "otherpages/about-me.html"><img src = "buttons/about-me.png" alt = "About Me Button"/></a>
<a href = "otherpages/about-me.html"
><img class = "aboutmehover" src = "buttons/about-me-hover.png" alt = "About Me Button"/></a>
<a href = "otherpages/blog.html"><img src = "buttons/blog.png" alt = "About Me Button" /></a>
<a href = "otherpages/blog.html"><img class = "bloghover" src = "buttons/blog-hover.png" /></a>
<a href = "buttons/interests.png"><img src = "buttons/interests.png"></a>
<img class = "interestshover" src = "buttons/interests-hover.png">
</div>
</div>
<div class = "column null" style = "background-color: rgba(125, 77, 77, 0)">
<p></p>
</div>
</body>
</html>У вас нет причин иметь два a hrefs для каждого штата. Сохраните один a href и попробуйте изменить background-image вот так stackoverflow.com/questions/18813299/…
Прежде чем сделать это, я попробовал изменить фоновое изображение, но это не сработало. попробую еще раз, спасибо
Ответы 1
Как я уже говорил в своем предыдущем комментарии, вам не нужно хранить два a href и переключаться между ними, поэтому вот один пример, основанный на вашем коде, который использует один тег a href, который переключает изображения в зависимости от того, наводит на них пользователь или нет.
.buttonlinks {
width: 300px;
height: 30px;
position: relative;
}
.buttonlinks img{
width: 100%;
height: 100%;
}
#about-me{
display:block;
background-image: url('https://placehold.co/100x50?text=About-Me');
height: 50px;
width: 100px;
}
#about-me:hover{
background-image: url('https://placehold.co/100x50?text=About-Me-Hover');
}
#blog{
display:block;
background-image: url('https://placehold.co/100x50?text=Blog');
height: 50px;
width: 100px;
}
#blog:hover{
background-image: url('https://placehold.co/100x50?text=Blog-Hover');
}
#interests{
display:block;
background-image: url('https://placehold.co/100x50?text=Interests-Me');
height: 50px;
width: 100px;
}
#interests:hover{
background-image: url('https://placehold.co/100x50?text=Interests-Hover');
}<html lang = "en">
<head>
</head>
<body>
<div class = "column left" style = "background-color: rgba(125, 77, 77, 0)">
<div class = "buttonlinks">
<a href = "otherpages/about-me.html" id = "about-me"></a>
<a href = "otherpages/blog.html" id = "blog"></a>
<a href = "buttons/interests.html" id = "interests"></a>
</div>
</div>
<div class = "column null" style = "background-color: rgba(125, 77, 77, 0)">
<p></p>
</div>
</body>
</html>Теперь на моей странице, следуя этому коду, изображения дублируются дважды, наведение теперь работает, но каждая кнопка/изображение находится на странице дважды и друг над другом.
Не могли бы вы создать jsfiddle.net и поделиться со мной кодом, чтобы я мог лучше понять проблему?
Понятно, это потому, что изображение, которое вы предоставляете, меньше контейнера a href, поэтому оно повторяется, заполняя пустое пространство. Посмотрите это: w3schools.com/cssref/css3_pr_background-size.php
Что вы также можете сделать, так это установить a hrefs размером 300 на 50 пикселей, чтобы соответствующим образом настроить изображение.
Публикуя код, используйте минимальный воспроизводимый пример и обращайте особое внимание на слово «минимальный». Я также не вижу в вашем коде кнопок, только несколько якорей с изображениями, которые здесь не запускаются. Также обратите внимание, что ваши якоря полностью недоступны (не следует использовать изображения с текстом в качестве кнопок).