Как решить проблему с назначением свойств css через JS?

Доброго всем дня! вопрос в следующем, написал маленький скрипт для появления и исчезания блока при наведении на родительский элемент, используя Jquery.
$(document).ready(function(){
	$(".our_path").mouseover(function(){
		$(".refresher").css("display", "inline-block", "opacity", "1");
	});
	$(".our_path").mouseout(function(){
	$(".refresher").css("display", "none");
	});
});

Основную функцию скрипт выполняет, но появился неприятный дергающийся эффект. Свойство "display" стало хаотично меняться.
  • Вопрос задан
  • 2495 просмотров
Пригласить эксперта
Ответы на вопрос 5
@podvzbzdnul
Тут вообще js не нужен, можно обойтись css
.refresher{
    visibility:hidden;
}

.our_path:hover .refresher{
    visibility:visible;
}

jsfiddle.net/podvzbzdnul/wNKC3
Ответ написан
Satanpit
@Satanpit
Front-end developer
Можно еще так :)
$(document).ready(function() {
    var child = $('.child');
    
    $('.parent').hover(function() {
        child.show();
    }, function() {
        child.hide();
    });
});


jsfiddle.net/b2nU8
Ответ написан
$(document).ready(function(){
	$(".our_path").on('mouseenter', function(){
		$(".refresher").css({display: "inline-block", opacity: 1});
	});
	$(".our_path").on('mouseleave', function(){
	        $(".refresher").css("display", "none");
	});
});

Так должно помочь. Основные изменения:
* `mouseover/mouseout заменил на mouseenter/mouseleave - они срабатывают однократно при вхождении/выхождении курсора в область элемента
* если вы хотите установить одновременно несколько свойств CSS, нужно их передавать в виде объекта, а не набора строк.
Ответ написан
Deimosss88
@Deimosss88 Автор вопроса
Спасибо, но проблема решилась переназначением .our_path на верхнего родителя.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы