Событие при наведении мышки
Здравствуйте!
Есть примерно такой код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<style>
.hide-blocks-facty li {
display: none;
list-style: none;
border: 2px solid #b463b2;
padding-top: 10px;
font-size: 13px;
}
</style>
</head>
<body>
<div id="facty">
<ul class="blockfactywithimage">
<li>Впечатляющий стаж работы</li>
<li>Эксклюзивный дизайн</li>
<li>Гарантии качества</li>
<li>Собственное производство</li>
<li>Оперативная работа онлайн</li>
<li>Выезд к клиенту</li>
<li>Изделия под ключь</li>
</ul>
<div class="hide-blocks-facty">
<ul class="margintop0" style="width: 1173px;">
<li><p>Более 11 лет мы работаем с клиентами в текстильной индустрии, каждый год подтверждая свой профессионализм.</p></li>
<li><p>С вами работает персональный дизайнер, индивидуально разрабатывая модели только под ваш интерьер.</p></li>
<li><p>Размещая заказ у нас, вы получаете комплект официальных документов, являющихся для вас юридической гарантией качества нашей работы.</p></li>
<li><p>Каждое изделие изготавливается по индивидуальному лекалу по европейским стандартам, под тщательным руководством опытного технолога.</p></li>
<li><p>Мы экономим ваше время! Принимайте решения, согласовывайте дизайн штор и текстиль в онлайн-режиме не отрываясь от своих дел.</p></li>
<li><p>Мы заботимся о вашем комфорте, поэтому наши специалисты приедут к вам на встречу в любую точку Москвы и Московской области.</p></li>
<li><p>Мы оказываем комплексное текстильное оформление, начиная от замера и заканчивая установкой готовых изделий.</p></li>
</ul>
</div>
</div>
<script>
$(document).ready(function() {
$("#facty .blockfactywithimage li:nth-child(1)").hover(function() {
activeTHis(this);
$(".hide-blocks-facty li:nth-child(1)").fadeIn();
$(this)
.closest("ul")
.find("li")
.hasClass("activex");
});
$("#facty .blockfactywithimage li:nth-child(2)").hover(function() {
activeTHis(this);
$(".hide-blocks-facty li:nth-child(2)").fadeIn();
$(this)
.closest("ul")
.find("li")
.hasClass("activex");
});
$("#facty .blockfactywithimage li:nth-child(3)").hover(function() {
activeTHis(this);
$(".hide-blocks-facty li:nth-child(3)").fadeIn();
$(this)
.closest("ul")
.find("li")
.hasClass("activex");
});
$("#facty .blockfactywithimage li:nth-child(4)").hover(function() {
activeTHis(this);
$(".hide-blocks-facty li:nth-child(4)").fadeIn();
$(this)
.closest("ul")
.find("li")
.hasClass("activex");
});
$("#facty .blockfactywithimage li:nth-child(5)").hover(function() {
activeTHis(this);
$(".hide-blocks-facty li:nth-child(5)").fadeIn();
$(this)
.closest("ul")
.find("li")
.hasClass("activex");
});
$("#facty .blockfactywithimage li:nth-child(6)").hover(function() {
activeTHis(this);
$(".hide-blocks-facty li:nth-child(6)").fadeIn();
$(this)
.closest("ul")
.find("li")
.hasClass("activex");
});
$("#facty .blockfactywithimage li:nth-child(7)").hover(function() {
activeTHis(this);
$(".hide-blocks-facty li:nth-child(7)").fadeIn();
$(this)
.closest("ul")
.find("li")
.hasClass("activex");
});
$(".hide-blocks-facty ul").css("width", $(".blockfactywithimage").width());
}); //ready
function activeTHis(a) {
$("#facty .blockfactywithimage li").removeClass("activex");
$(a).addClass("activex");
$(".hide-blocks-facty li").hide();
}
</script>
</body>
</html>
Т.е. при наведении на элемент списка, внизу должно появляться его описание, соответсвенно когда убираем мышку - описание должно пропадать. Проблема в том, что если двигаем мышку быстро, то появляется сразу несколько описаний снизу. Как это можно поправить? |
Вообще-то сначала надо убрать лишние обработчики, они у вас все одинаковы, хватит одного на все элементы.
|
Цитата:
$("#facty .blockfactywithimage li:nth-child(5)").hover(function() {
activeTHis(this);
defaulImg();
$(".hide-blocks-facty li:nth-child(5)").fadeIn();
$(this)
.closest("ul")
.find("li")
.hasClass("activex");
$("#facty ul li:nth-child(5) img").attr(
"src",
"/assets/templates/texti/images/icon6h.png"
);
});
|
Цитата:
$(document).ready(function() {
$("ul.blockfactywithimage li").mouseenter(function() {
$('ul.margintop0 li').eq($(this).addClass('activex').index()).fadeIn();
}).mouseleave(function() {
$('ul.margintop0 li').eq($(this).removeClass('activex').index()).hide();
});
$(".hide-blocks-facty ul").css("width", $(".blockfactywithimage").width());
});
этот код выполняет ровно тоже, что и все ваши обработчики. Не проблема еще и картинки обрабатывать и все что угодно. mouseenter и mouseleave вместо hover для того, чтобы не возникало куча событий при движении в пределах самих LI. |
А после того как убедились, что это так, решаем проблему, а для этого нужно завершать запущенные анимации методом .stop(). Строка 4 в коде должна быть такой:
$('ul.margintop0 li').stop().eq($(this).addClass('activex').index()).fadeIn();
|
Ну и последнее замечание - не кажется ли вам, что методы addClass и removeClass в коде лишнее и это вполне может решить ul.margintop0 li:hover?
|
спасибо, mouseenter работает действительно лучше чем hover...
Про остальное, с Вами тоже полностью согласен ) |
Ну тогда еще вопрос - а зачем в отображаемом LI подгружать иконку по его показу, вместо того чтобы иметь ее уже загруженной?
|
Я бы хотел обратить внимание на ваш HTML-код. Чтобы вам добавить/удалить/вставить новую пару, состоящую из заголовка и описания, придётся менять в двух местах. Притом придётся учитывать позицию элементов в списке. Это очень сложное дело! Вы можете запутаться и вам придется проверять весь список! Почему бы заголовок и описание не хранить рядом?
Я уменьшил ваш JavaScript путём использования анимации CSS. Также была добавлена поддержка для клавиатуры и сенсорных экранов.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
#facts {
display: grid;
}
#facts dt {
display: list-item;
margin-left: 2.5em;
cursor: default;
}
#facts dt:hover + dd,
#facts dt:focus + dd {
opacity: 1;
}
#facts dd {
order: 1;
border: 2px solid #b463b2;
background: #eee;
padding: 1em;
opacity: 0;
transition: opacity 500ms;
grid-row-end: 9999;
grid-column: 1 / -1;
pointer-events: none;
align-self: start;
}
</style>
</head>
<body>
<dl id="facts">
<dt>Впечатляющий стаж работы</dt>
<dd>
Более 11 лет мы работаем с клиентами в текстильной индустрии,
каждый год подтверждая свой профессионализм.
</dd>
<dt>Эксклюзивный дизайн</dt>
<dd>
С вами работает персональный дизайнер, индивидуально
разрабатывая модели только под ваш интерьер.
</dd>
<dt>Гарантии качества</dt>
<dd>
Размещая заказ у нас, вы получаете комплект официальных
документов, являющихся для вас юридической гарантией качества
нашей работы.
</dd>
<dt>Собственное производство</dt>
<dd>
Каждое изделие изготавливается по индивидуальному лекалу
по европейским стандартам, под тщательным руководством
опытного технолога.
</dd>
<dt>Оперативная работа онлайн</dt>
<dd>
Мы экономим ваше время! Принимайте решения, согласовывайте
дизайн штор и текстиль в онлайн-режиме не отрываясь
от своих дел.
</dd>
<dt>Выезд к клиенту</dt>
<dd>
Мы заботимся о вашем комфорте, поэтому наши специалисты
приедут к вам на встречу в любую точку Москвы
и Московской области.
</dd>
<dt>Изделия под ключ</dt>
<dd>
Мы оказываем комплексное текстильное оформление, начиная
от замера и заканчивая установкой готовых изделий.
</dd>
</dl>
<script>
for(const element of document.querySelectorAll("#facts dt"))
element.tabIndex = 0;
</script>
</body>
</html>
Вместо тройки элементов (dl, dt, dd) можно использовать, например, (section, h2, p) |
Цитата:
|
| Часовой пояс GMT +3, время: 04:58. |