Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   мигание элементов, на которых есть hover (https://javascript.ru/forum/events/35588-miganie-ehlementov-na-kotorykh-est-hover.html)

zlodiak 15.02.2013 14:19
мигание элементов, на которых есть hover
 
помогите пожалуйста разобраться

есть 2 элемента. первый позиционирован relative (#cart_informer), второй - absolute (.tooltip_cart). эти элементы частично перекрываются на странице. разметку их не привожу, так как она значения не имеет

на эти элементы повешен hover следующим образом
$('#cart_informer, .tooltip_cart').hover(
	function () {
		$('.tooltip_cart').stop(false, true).fadeIn('fast');	
	},
	function () {
		$('.tooltip_cart').stop(false, true).fadeOut('slow');
	}
);


проблема в том, что при перемещении курсора между этими элементами происходит мигание одного из них(.tooltip_cart)

Deff 15.02.2013 14:35
zlodiak,
используйте

$("#cart_informer, .tooltip_cart").mouseenter(function(){
//Код
}).mouseleave(function(){
//Код
});

zlodiak 15.02.2013 14:51
пробовал. то же самое получается

vadim5june 15.02.2013 15:04
Попробуйте в каждую функцию добавить event.stopPropagation()

zlodiak 15.02.2013 15:11
пробовал. не помогло

вот мой код
$("#cart_informer, .tooltip_cart").mouseenter(function(event){
	event = event || window.event;
	event.stopPropagation();
	
	if($.cookie('cart_flag') == 'true'){
		$('.tooltip_cart').stop(false, true).fadeIn('fast');
	};
}).mouseleave(function(event){
	event = event || window.event;
	event.stopPropagation();
	
	$('.tooltip_cart').stop(false, true).fadeOut('slow');
});


к сожалению саму страницу показать не могу

vadim5june 15.02.2013 15:24
теоретически я понимаю так
$("#cart_informer, .tooltip_cart")
здесь нужно что то одно оставить а то получается с одного элемента уходит а на другой приходит-одновременно включается и fadein и fadeout
ну или разделить-для каждой свою функцию
оставьте только
$(" .tooltip_cart")

zlodiak 15.02.2013 17:34
так тоже не работает
$("#cart_informer").mouseenter(function(event){
	event = event || window.event;
	event.stopPropagation();
	
	if($.cookie('cart_flag') == 'true'){
		$('.tooltip_cart').stop(false, true).fadeIn('fast');
	};
}).mouseleave(function(event){
	event = event || window.event;
	event.stopPropagation();
	
	$('.tooltip_cart').stop(false, true).fadeOut('slow');
});


$(".tooltip_cart").mouseenter(function(event){
	event = event || window.event;
	event.stopPropagation();
	
	if($.cookie('cart_flag') == 'true'){
		$('.tooltip_cart').stop(false, true).fadeIn('fast');
	};
}).mouseleave(function(event){
	event = event || window.event;
	event.stopPropagation();
	
	$('.tooltip_cart').stop(false, true).fadeOut('slow');
});


неужели дело в разметке и css?.. такого быть не может

Brook 15.02.2013 23:02
можете кинуть изображение (рисунок, скрин) как расположены блоки и дать справку о наведении??

Brook 15.02.2013 23:06
по теории:
-сделайте исключения
if($('.tooltip_cart').attr('opacity')==1) {наведении на второй невозможно}else{..}
и так же обратно

zlodiak 16.02.2013 23:06
вот всё таки сделал рабочую модель. в двух вариантах. 1 и 2

помогите пожалуйста поправить так чтобы работало без мерцаний. про исключения я не понял. помогите пожалуйста, я тупой

Deff 16.02.2013 23:57 
$("#cart_informer").mouseenter(function(){
	$('.tooltip_cart').stop().fadeIn('fast');
}).mouseleave(function(){
	$('.tooltip_cart').stop().fadeOut('slow');
});

$('.tooltip_cart').mouseenter(function(){
	$('.tooltip_cart').stop().fadeIn('fast');
}).mouseleave(function(){
	$('.tooltip_cart').stop().fadeOut('slow');
});

Deff 17.02.2013 00:07
В принципе неправильно HTML подсказки вклеен
Он должен вклеивацо так
<a href="./cart/">Корзина
   <div style="display:inline-block">

      <!--Тут HTML контент подсказки с position:absolute; -->

   </div>
</a>

Тогда достаточно
$("#cart_informer").mouseenter(function(){
	$('.tooltip_cart').stop().fadeIn('fast');
}).mouseleave(function(){
	$('.tooltip_cart').stop().fadeOut('slow');
});

zlodiak 17.02.2013 12:15
огромнейшее спасибо

zlodiak 18.02.2013 10:23
заметил, что этот код не срабатывает в ie9. не подскажете причину?

я думал, jq это кроссбраузерная библиотека..

Deff 18.02.2013 12:08
Думаю, эту запись не понимает
<script src="design/{$settings->theme}/js/formating/accounting.js"></script>


Часовой пояс GMT +3, время: 23:35.