Как реализовать это?

266

21 октября 2018, 00:40

Есть вертикальный список 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);
});

Answer 1

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

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

$('.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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Зациклить воспроизведения звука в chrome

есть подключенный файл звука через html5

223

HTML

Как такое реализовать на canvase?

Нужно чтобы карта была в целом 1000на1000, но ВИДНАЯ часть лишь 100на100, как это сделать? Можно ли как-то указать координаты начала ВИДИМОГО экрана...

233

HTML

Как это сверстать?

Есть макет и мне интересно как можно сверстать навигацию(белый блок сверху)Размер макета 1600px, а отступы по 210px, получается размер контента(центровщика)...

287

jQuery

Как не загружать изображения в скрытых блоках?

Есть скрытые блоки внутри которых много контента + изображенийКак можно сделать, чтобы изображения загружались только когда блок становился...

235