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

Question

[Кирилл Вольф]

Доброго всем дня! вопрос в следующем, написал маленький скрипт для появления и исчезания блока при наведении на родительский элемент, используя Jquery.

$(document).ready(function(){
	$(".our_path").mouseover(function(){
		$(".refresher").css("display", "inline-block", "opacity", "1");
	});
	$(".our_path").mouseout(function(){
	$(".refresher").css("display", "none");
	});
});

Основную функцию скрипт выполняет, но появился неприятный дергающийся эффект. Свойство "display" стало хаотично меняться.

Comments

[1001001 111]

Есть такое в jquery =))))

Answer 1

[podvzbzdnul]

Тут вообще js не нужен, можно обойтись css

.refresher{
    visibility:hidden;
}

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

jsfiddle.net/podvzbzdnul/wNKC3

Comments

[Кирилл Вольф]

Это был бы идеальный вариант, если бы не IE. В IE работает не так, как нужно (:

[Юрий Лобанов]

@Deimosss88 чем же, не просветите? Эти свойства давно поддерживаются ie. Приведите весь код, в том числе код разметки.

[Кирилл Вольф]

Прошу прощения, все работает! Остановился именно на этом варианте.

Answer 2

[Александр Хиренко]

Можно еще так :)

$(document).ready(function() {
    var child = $('.child');
    
    $('.parent').hover(function() {
        child.show();
    }, function() {
        child.hide();
    });
});

jsfiddle.net/b2nU8

Comments

[Кирилл Вольф]

Это интересней, буду использовать:) Благодарю!

[podvzbzdnul]

@Deimosss88 с несколькими блоками не работает jsfiddle.net/podvzbzdnul/b2nU8/1

[Александр Хиренко]

@podvzbzdnul это же пример :) вот Вам с несколькими блоками jsfiddle.net/b2nU8/2

[podvzbzdnul]

@Satanpit я к тому, что выкладывая пример, нужно предполагать, что блоков может быть больше чем 1 :)

[Александр Хиренко]

@podvzbzdnul пример для того чтобы наставить человека на путь истинный, а не решать за него задачу :)

[podvzbzdnul]

@Satanpit ок, соглашусь.

Answer 3

[Юрий Лобанов]

Почему не сделать так?
codepen.io/iiil/pen/Brknu

Answer 4

[Артур Смирнов]

$(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, нужно их передавать в виде объекта, а не набора строк.

Answer 5

[Кирилл Вольф]

Спасибо, но проблема решилась переназначением .our_path на верхнего родителя.