1

Есть список элементов(в моем случае 6), под ними есть "плавающий" блок шириной равной одному элементу. При наведении на конкретный элемент списка плавающий блок должен проплыть от исходной позиции и встать под ним, а если убрать наведение, должен остаться на месте.

 $(document).ready(function(){
  $('.wrapper ul li').mouseover(function(){
      $(this).addClass('current');
    });
 });
.wrapper{
  width:800px;
  overflow:hidden;
}
.wrapper ul{
  width:800px;
  height:95px;
  overflow:hidden;
  margin-bottom:10px;
}
.wrapper ul li{
  width:95px;
  height:95px;
  margin-right:5px;
  float:left;
  display:inline-block;
  background-color:#33a030;
}
.cur-item{
  width:95px;
  height:30px;
  display:inline-block;
  position:absolute;
  left:50px;
  background-color:#33a030;
}
.current{
  background-color:#000!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div class="cur-item"></div>
</div>

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

Найденное ниже решение работает только после перезагрузки страницы.

2

1 ответ 1

2

Можно решить эту проблему устанавливая в JS свойство left. Вот jsFiddle с полным примером, а вот немного измененная JS-функция:

$(document).ready(function(){
    var item = document.getElementsByClassName('cur-item')[0];
    $('.wrapper ul li').hover(
        function(evt){
            $(this).addClass('current');
            item.style.left = this.offsetLeft + 'px';

        },
        function(evt) {
            $(this).removeClass('current');
            item.style.left = 50 + 'px';
        });
 });

P.S. Добавлю просьбу из комментария и небольшое улучшение, jsFiddle. Аминирование свойства transform не вызывает repaint у стилей и, например, в Firefox формированием картинки будет заниматься GPU, что благотворно скажется на скорости работы страницы.

 $(document).ready(function(){
    var item = document.getElementsByClassName('cur-item')[0];
    $('.wrapper ul li').on('mouseenter',
        function(evt){
            item.style.transform = 'translateX(' + (this.offsetLeft + 100) + 'px)';
        });
 });
12
  • Ваще супер, а можно сделать такб чтобы когда hover убрал, она б на месте этом же осталась, А не в начало возвращалась? 23 сен 2015 в 11:24
  • Зачет! Спасибо! 23 сен 2015 в 11:34
  • @Александр, hover - алиас на два события, mousenter и mouseleave, соответственно убрав всё, что происходит на mouseleave добьёмся нужного эффекта.
    – Rolandius
    23 сен 2015 в 11:35
  • Еще вопрос есть. Было б ваще круто, если бы этот блок возвращался к блоку с определенным классом(имеется ввиду блок с классом active, active присваивается li, чья ссылка внутри совпадает с урлом страницы. ) 23 сен 2015 в 11:50
  • @Александр, в первом варианте я задал точку возврата. Вместо константного значения можно написать offsetLeft нужного Вам элемента.
    – Rolandius
    23 сен 2015 в 11:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.