0

var link = $('.link');
var box = $('.box');

link.mouseover(function() {
    box.show();
});
div {
  display: none;
  width: 50px;
  height: 50px;
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="link" href="#">Link</a>
<div class="box">Content</div>

Подскажите как реализовать:

показать элемент при наведении на другой элемент и , пока мышь находится на показанном элементе, показывать его. Если убрать мышь с показанного элемента - скрыть его. Извиняюсь, если кому-то будет трудно понять формулировку.

Начал примерно вот так, допускаю что неправильно. Подскажите как грамотно это можно сделать. На ванильном js или jquery. Без разницы.

вот реальный пример, который работает не так как нужно: https://i.sstatic.net/GBGWc.png

3
  • нуууу, правильно же, осталось только скрывать, когда убираете мышь
    – ThisMan
    Commented 31 июл. 2018 в 13:00
  • @ThisMan нужно скрывать когда убираешь мышь с <div class="box">Content</div> :) написал еще одну функцию с mouseout, что бы она скрывала показанный элемент, когда я убираю с нее мышь и не работает Commented 31 июл. 2018 в 13:06
  • @ThisMan добавил в вопрос скриншот Commented 31 июл. 2018 в 13:10

3 ответа 3

3

Можно сделать это с помощью CSS:

.box {
  display: none;
  width: 50px;
  height: 50px;
  background: red;
}

.link:hover ~ .box {
  display: block;
} 
2
  • вариант крутой, но у меня не сработает( я плохо расписал конструкцию - у меня Link лежит внутри другого блока. То есть link и box не родственные. Commented 31 июл. 2018 в 14:02
  • 1
    Это можно применить более-менее для любой структуры, надо только правильный селектор подобрать. Это штука достаточно мощная, если нужна помощь, кидай точную html структуру Commented 31 июл. 2018 в 14:38
2

Лови бро

		.block1 {
			width: 150px;
			height: 150px;
			background-color: yellow;
		}
		.block2 {
			width: 150px;
			height: 150px;
			background-color: red;
			display: none;
		}
<div class="block1">element1</div>
<div class="block2">element 2</div>



<script>
	
var x = document.querySelector('.block1');
var y =  document.querySelector('.block2');
x.onmouseover = function () {
	y.style.display = 'block';
};
x.onmouseout = function () {
	y.style.display = 'none';
};


</script>

1
  • Ivanova не совсем то что я спрашивал) что бы было понятнее возьмем твой пример - первая функция ок, во второй нужно указать что если мышь убирается с УЖЕ ПОКАЗАННОГО ( в данном случае с переменной y) блока, то только тогда ОН ЖЕ пропадает :) Commented 31 июл. 2018 в 14:00
0

Почитал learn.javascript.ru и нашел решение, поменяв на mouseenter / mouseleave

$(document).ready(function() {
   var popupLink = $('.underline');
   var rulesPop = $('.rules__popup');
   popupLink.mouseenter(function () {
       rulesPop.show();
   });

    rulesPop.mouseleave(function () {
        rulesPop.hide();
    });
});

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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