Мобильная версияизображение при наведении для моего Кнопка «блог» отображается поверх кнопки над ней. (на изображении ниже я сделал кнопку прозрачной на 50 %, чтобы вы могли видеть проблему)
(https://i.sstatic.net/Hn98U1Oy.png)
(i знаю, что этот код не очень хорош, я начал изучать его только 4 дня назад и сейчас просто создаю этот тестовый сайт)
Я пробовал следовать нескольким различным онлайн-руководствам, но застрял как решить эту проблему.
Код: Выделить всё
body {
background-image: url(images/rainbg.jpg);
}
.top-bar-null {
width: 100%;
height: 50px;
}
.links-bar {
width: 1610px;
height: 40px;
background-color: #636d83;
margin: auto;
margin-bottom: 15px;
}
.column {
float: left;
padding: 10px;
min-width: 15px;
min-height: 700px;
max-height: 700px;
}
.right {
padding-left: 21px;
padding-right: 10px;
}
.right {
overflow: auto;
width: 19%;
border: #ffb7c4 dotted 2px;
}
.left {
padding: 5px;
}
.middle {
width: 45%;
padding-left: 15px;
padding-right: 15px;
}
.section-one-title {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: rgb(255, 20, 147);
}
.left-text {
color: pink;
overflow: auto;
}
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
background-color: rgba(99, 192, 203, 0.58);
text-align: center;
}
::-webkit-scrollbar {
width: 10px;
}
*::-webkit-scrollbar-track {
background: #dcedfe;
}
*::-webkit-scrollbar-thumb {
background-color: #5479a0;
border-radius: 1px;
border: 1.5px solid #ffffff;
}
.left-null-col {
float: left;
width: 7.6%;
min-height: 700px;
max-height: 700px;
}
/* --------- Right column stuff ----------*/
.section-three-title {
width: 300px;
font-family: Helvetica, Arial, sans-serif;
text-align: center;
font-style: italic;
font-weight: 900;
background-color: #c5d3e1;
padding: 2px;
font-size: 45px;
color: #7d9fb0;
text-shadow: 1px 1px 0.5px grey;
border-radius: 35px 35px;
margin-left: 15px;
margin-bottom: 15;
transform: rotate(-3.5deg);
}
.music {
/* Box that holds music and title*/
width: 340px;
background-color: white;
background-image: url(Images/gifs/rain.gif);
height: 450px;
padding-top: 1px;
margin-left: -1px;
}
iframe {
margin-left: 15px;
margin-top: 17px;
}
.albumofweek {
/* Album of week TEXT */
font-family: Helvetica, Arial, sans-serif;
font-size: 25px;
color: #7d9fb0;
font-weight: 900;
text-align: center;
padding-top: 5px;
text-shadow: 2px 2px #00235f;
}
.albumofweekbox {
background-color: #636d83;
margin-top: 10px;
width: 90%;
margin: auto;
height: 35px;
border-radius: 25px 45px;
transform: rotate(4deg);
box-shadow: 5px 5px 6px black;
}
/* --------- Middle column stuff ----------*/
.welcomepage {
/* div box settings*/
float:left;
background-color: #343434;
padding-bottom: 1px;
border-radius: 15px;
width:500px;
transform:rotate(-)
}
.section-two-title {
/* 'Welcome' Title*/
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
margin:auto;
margin-left: 30px;
font-weight: 900;
color: #c5d3e1;
text-shadow: 2px 1.5px 0.5px #7d9fb0;
text-decoration:underline;
text-decoration-style: wavy;
}
.welcomemessage {
/* Welcome message*/
color:#c5d3e1;
/*add custom font later*/
margin-left: 30px;
margin-right: 30px;
Margin-top:10px;
margin-bottom:10px;
}
.midleft {
background-color: #c5d3e1;
border-radius: 4px;
width:330px;
height:250px;
float: right;
overflow:auto;
}
.siteupdatestitle{
font-size:20px;
margin-top:20px;
margin-left: 18px;
font-weight:900;
color:#636d83
}
.siteupdates {
margin: 20px;
color:#485879;
line-height: 1.1;
}
/* -------- text changes ----- */
p {
font-family: helvetica, arial;
font-size: 17px;
line-height: 22px;
}
.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;
}Код: Выделить всё
Metallic's Rain Corner
[url=otherpages/about-me.html]
[img]buttons/about-me.png[/img]
[/url]
[url=otherpages/about-me.html]
[img]buttons/about-me-hover.png[/img]
[/url]
[url=otherpages/blog.html]
[img]buttons/blog.png[/img]
[/url]
[url=otherpages/blog.html]
[img]buttons/blog-hover.png[/img]
[/url]
[url=buttons/interests.png]
[img]buttons/interests.png[/img]
[/url]
[img]buttons/interests-hover.png[/img]
Welcome!
Welcome to my little site!
SITE UPDATES
Aug 2024 - More words here.
July 2024 - I still have a lot of work to do so a lot of links won't work.
Fun Stuff
ALBUM OF THE WEEK:
Some text..
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
Подробнее здесь: https://stackoverflow.com/questions/786 ... ng-in-html
