Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.01.2019, 12:13
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 250

Событие при наведении мышки
Здравствуйте!
Есть примерно такой код:
<!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>

Т.е. при наведении на элемент списка, внизу должно появляться его описание, соответсвенно когда убираем мышку - описание должно пропадать.
Проблема в том, что если двигаем мышку быстро, то появляется сразу несколько описаний снизу. Как это можно поправить?
Ответить с цитированием
  #2 (permalink)  
Старый 12.01.2019, 12:54
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,531

Вообще-то сначала надо убрать лишние обработчики, они у вас все одинаковы, хватит одного на все элементы.
Ответить с цитированием
  #3 (permalink)  
Старый 12.01.2019, 13:12
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 250

Сообщение от laimas Посмотреть сообщение
Вообще-то сначала надо убрать лишние обработчики, они у вас все одинаковы, хватит одного на все элементы.
на самом деле, там еще картинки должны подставляться разные в этих обработчиках
$("#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"
        );
    });
Ответить с цитированием
  #4 (permalink)  
Старый 12.01.2019, 13:16
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,531

Сообщение от Igorsrt
там еще картинки должны подставляться разные в этих обработчиках
Это не повод клонировать обработчики, есть у элементов набора индексы, этого вполне хватит:

$(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.
Ответить с цитированием
  #5 (permalink)  
Старый 12.01.2019, 13:28
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,531

А после того как убедились, что это так, решаем проблему, а для этого нужно завершать запущенные анимации методом .stop(). Строка 4 в коде должна быть такой:

$('ul.margintop0 li').stop().eq($(this).addClass('activex').index()).fadeIn();
Ответить с цитированием
  #6 (permalink)  
Старый 12.01.2019, 13:37
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,531

Ну и последнее замечание - не кажется ли вам, что методы addClass и removeClass в коде лишнее и это вполне может решить ul.margintop0 li:hover?

Последний раз редактировалось laimas, 12.01.2019 в 19:11.
Ответить с цитированием
  #7 (permalink)  
Старый 12.01.2019, 21:15
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 250

спасибо, mouseenter работает действительно лучше чем hover...
Про остальное, с Вами тоже полностью согласен )
Ответить с цитированием
  #8 (permalink)  
Старый 13.01.2019, 05:28
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,531

Ну тогда еще вопрос - а зачем в отображаемом LI подгружать иконку по его показу, вместо того чтобы иметь ее уже загруженной?
Ответить с цитированием
  #9 (permalink)  
Старый 13.01.2019, 08:01
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,031

Я бы хотел обратить внимание на ваш 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)

Последний раз редактировалось Malleys, 13.01.2019 в 08:07.
Ответить с цитированием
  #10 (permalink)  
Старый 13.01.2019, 08:58
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 250

Сообщение от laimas Посмотреть сообщение
Ну тогда еще вопрос - а зачем в отображаемом LI подгружать иконку по его показу, вместо того чтобы иметь ее уже загруженной?
Скажу честно, это не мой код (к тому же здесь он упрощен, на сайте все немного по другому). Раньше эти вкладки менялись по клику, захотели что бы при наведении... Хотелось сделать это все с минимальными усилиями - mouseenter помог. Еще раз всем спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно подавить событие при подключении своего обработчика? Маэстро Firefox/Mozilla 2 03.09.2011 10:46
Менять цвет фона select option при наведении Dmitriykh Элементы интерфейса 3 25.07.2011 12:04
Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки? Tass Общие вопросы Javascript 7 17.02.2011 08:06
menu с выпадающими подменю при наведении и раздвижное при клике bugor Элементы интерфейса 3 04.10.2010 13:32
Событие при наведении мышкой на фото ssh Общие вопросы Javascript 2 16.11.2009 21:25