0

Есть вертикальный список div'ов,с классом res и функция,которая происходит при наведении курсора мыши на этот блок

Как в этой функции создавать блок (или менять его отступы) чтобы он был справа от тега,на который происходит mouseover?

<div class="res"></div>


$( ".res" ).mouseover(function(event) {
    var first = this;
    var second =  event.clientY;
    alert(Number(second.offsetTop));
  var distance = second.offsetTop - first.offsetTop - first.offsetHeight;
  alert(distance);
});
5
  • 2
    покажите код, который уже есть, не стесняйтесь
    – ThisMan
    8 авг 2018 в 20:16
  • Есть только функция на jquery,которая ловит hover. Я хотел сделать с помощью offset'ов,но ошибку выдает: jsfiddle.net/rc6uvpxy/1 ,distance - должно было быть расстояние на которое нужно подвинуть предполагаемый блок
    – IvanZ
    8 авг 2018 в 20:32
  • добавьте код в вопрос, а не ссылкой
    – ThisMan
    8 авг 2018 в 20:33
  • Добавил код в вопрос
    – IvanZ
    8 авг 2018 в 20:46
  • 1
    Заголовок вопроса должен содержать краткое содержание вопроса, а не непонятно что...
    – Air
    8 авг 2018 в 21:31

1 ответ 1

4

Правильно понял?

Вертикальный вариант

$('.menu a').hover(function(){
  EffectPos($(this));
});
EffectPos($('.menu a').eq(0));


function EffectPos(elem){
  var AposY = elem.offset().top;
  var Aheight = elem.height();
  $('.effect').css({
    'top': AposY,
    'height': Aheight
  });
}
.menu {
  display: block;
  width: 200px;
  background: #ddd;
}

.links {
  display: block;
  width: calc(100% - 2px);
  padding-left: 2px;
}

.links a {
  display: block;
  width: calc(100% - 10px);
  padding: 5px;
  color: #333;
  text-decoration: none !important;
}

.links a:hover {
  background: #999;
}

.effect {
  display: block;
  width: 2px;
  padding: 5px 0;
  background: #07f;
  position: absolute;
}

.links a, .effect {transition: all linear .2s;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="menu">
  <div class="links">
    <a href="/">Один</a>
    <a href="/">Два</a>
    <a href="/">Три</a>
    <a href="/">Четыре</a>
    <a href="/">Пять</a>
    <a href="/">Шесть</a>
  </div>
  <div class="effect"></div>
</div>

Горизонтальный вариант

$('.menu a').hover(function(){
  EffectPos($(this));
});
EffectPos($('.menu a').eq(0));


function EffectPos(elem){
  var AposX = elem.offset().left;
  var Awidth = elem.width();
  $('.effect').css({
    'left': AposX,
    'width': Awidth
  });
}
.menu {
  display: block;
  width: 100%;
  height: 40px;
  background: #ddd;
}

.links {
  display: block;
  width: 100%;
  height: 38px;
}

.links a {
  display: inline-block;
  height: 38px;
  line-height: 38px;
  padding: 0 5px;
  color: #333;
  text-decoration: none !important;
}

.links a:hover {
  background: #999;
}

.effect {
  display: block;
  height: 2px;
  padding: 0 5px;
  background: #07f;
  position: absolute;
}

.links a, .effect {transition: all linear .2s;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="menu">
  <div class="links">
    <a href="/">Один</a>
    <a href="/">Два</a>
    <a href="/">Три</a>
    <a href="/">Четыре</a>
    <a href="/">Пять</a>
    <a href="/">Шесть</a>
  </div>
  <div class="effect"></div>
</div>

5
  • Да,а как это переделать для вертикали)?
    – IvanZ
    8 авг 2018 в 20:48
  • Сейчас изменю код
    – De.Minov
    8 авг 2018 в 20:49
  • @IvanZ, добавил)
    – De.Minov
    8 авг 2018 в 20:53
  • Спасибо большое за такую помощь)
    – IvanZ
    8 авг 2018 в 21:01
  • @IvanZ, не за что)
    – De.Minov
    8 авг 2018 в 21:15

Ваш ответ

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

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