Здравствуйте! Имеется вот такое дело: ссылка на пример jsfiddle.net Там на месте зеленого прямоугольника использую изображение (background-image), а в этом примере для наглядности обозначил цветом. В общем всю ночь убил, чтобы сделать смену изображения (зеленый прямоугольник) на следующее при его перемещении от пункта к пункту и в обратном порядке. Пытаюсь реализовать на css, т.к. на js пока что не умею толком ничего, но ничего не удается.
body {
font-size: 1.5em;
background: #f2f2f2;
font-family: sans-serif;
}
/* --- for all three examples ----*/
.nav {
text-align: center;
overflow: hidden;
margin: 2em auto;
width: 90%;
position: relative;
}
.nav a {
display: block;
position: relative;
float: left;
padding: 1em 0 2em;
width: 25%;
text-decoration: none;
color: #393939;
transition: .7s;
}
.nav a:hover {
color: #c6342e;
background-image: url(../test.png);
background-repeat: no-repeat;
box-shadow: 0em 0.5em 7px rgba(122, 122, 122, 0.2);
}
.effect {
position: absolute;
left: -12.5%;
transition: 0.7s ease-in-out;
}
.nav a:nth-child(1):hover~.effect {
left: 12.5%;
}
.nav a:nth-child(2):hover~.effect {
left: 37.5%;
}
.nav a:nth-child(3):hover~.effect {
left: 62.5%;
}
.nav a:nth-child(4):hover~.effect {
left: 87.5%;
}
/* ----- line example -----*/
.ph-line-nav .effect {
width: 90px;
height: 50px;
bottom: 36px;
background-image: url(../w.png);
background-repeat: no-repeat;
border-bottom: 1px solid #c6342e;
z-index: -1;
margin-left: -45px;
}
.vis-nav {
border-bottom: 0px solid gray;
box-shadow: 0em 0.2em 7px rgba(122, 122, 122, 0.2);
}
<div class="ph-line-nav nav vis-nav">
<a href="#">пункт</a>
<a href="#">пункт</a>
<a href="#">пункт</a>
<a href="#">пункт</a>
<div class="effect"></div>
</div>