У меня проблемы с ссылками на скользящее меню.Каждое скользящее меню работает так, как задумано, но если я попытаюсь навести скользящую ссылку в том же горизонтальном пространстве, что и текст h1 (первый, с надписью «PERFIL»), оно не будет работать, пока курсор не покинет h1.площадь.
<!doctype html>
<html class="video">
<head>
<meta charset="utf-8">
<title>Title</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<div class="wrapper">
<ul id="menu">
<li id="home">
<a href="home.html">PERFIL<img src="menu/home.png"></a>
</li>
<li id="3d">
<a href="grafica3d.html">GRAFICA 3D<img src="menu/3d.jpg"></a>
</li>
<li id="3">
<a href="audiovisual.html">AUDIOVISUAL<img src="menu/audio.jpg"></a>
</li>
<li id="4">
<a href="fotomontaje.html">FOTOMONTAJE DIGITAL<img src="menu/ps.png"></a>
</li>
<li id="5">
<a href="contacto.html">CONTACTO<img src="menu/contact.png"></a>
</li>
</ul>
</div>
<body>
<h1><div id="video">VIDEO</div></h1>
</body>
</html>
.wrapper * {
overflow:hidden;
list-style:none;
margin:0;
padding:0;
}
.wrapper ul li {
display:flex;
margin-bottom:10px;
}
.wrapper ul li a {
background:black;
color:white;
padding:5px 10px;
transform: translateX(calc(-100% + 45px));
transition: transform 1s ease;
text-decoration: none;
}
.wrapper img {
max-width:32px;
margin-left:5px;
}
.wrapper ul li a:hover {
background:black;
color:white;
padding:5px 10px;
transform: translateX(0);
}
.wrapper:hover a:focus {
left: 0;
background: none;
}
.video h1 {
font-family: verdana;
color: white;
text-align: right;
margin-right: 5%;
margin-top: -280px;
margin-bottom: 50px;
text-transform: uppercase;
background-position: center;
transform: skewX(-20deg);
transform-origin: top;
}
.video div {
padding: 2%;
display: inline;
border-radius: 15px;
}
#video {
background-color: black;
padding: 1%;
display: inline;
border-radius: 15px;
}
Вот макет сайта
( Jfiddle )