Перманентное пропадание блока при наведении.
Здравствуйте. Я этот форум расцениваю как крайнюю меру... в общем пришлось написать.
Захотел сделать плашку для сайта, да не простую, а чтобы она была с "position: fixed" и была на некоторых страницах, чтобы постоянно напоминала пользователю. В общем плашка-напоминалка :D Плашку сделать получилось и даже получилось найти и подкорректировать код js. Зачем тут js? Дело в том, что эта вещица закрывает некоторую часть рабочего пространства (там тупо кнопки и текст) и пользователю нужно нажать, либо прочитать закрытую информацию. Решено было сделать её исчезающей. Так и было сделано! О боже, всё было идеально, но кнопка на страничке перестала нажиматься, ибо конструкция лишь меняла прозрачность. Волей судьбы код был ещё более извращён до состояния, которое я могу продемонстрировать. //Плашка-предупреждалка $("#omfg_outer_Oo").live("mouseover", function() { $('#omfg_outer_Oo').fadeToggle(); }) $("#omfg_outer_Oo").live("mouseleave", function() { $('#omfg_outer_Oo').delay(3500).fadeToggle(); }) В принципе тут всё хорошо. Нажать можно и плашка появляется, но она назойливо появляется через 3 секунды... А хотелось бы , чтобы во время позиционирования курсора на блоке, плашка даже подумать не могла бы о появлении! Пробовал химичить со stop() и toggle(). Ничего не помогает. Это - лучшее, что получилось. Помогите, пожалуйста :) |
Threaded_Inquisitor,
о html самим догадаться? |
Ну там обычный див вот с этим...
#omfg_outer_Oo{background: none repeat scroll 0 0 #FFFFFF;height:135px;position: fixed;right:0;top:205px;width:445px;z-index:9999;padding:10px;} |
Цитата:
|
Когда я ничего не делаю, то плашка висит. Когда навожу мышку, то на некоторое время она пропадает, а потом снова появляется. Хочется чтобы она вовсе не появлялась, когда мы навели на место плашки мышку. А тогда, когда мы снова убираем мышку, нужно чтобы плашка появлялась (для этого я и экспериментировал с toggle()).
|
Странное издевательство надо пользователями - прятать плашку, когда они наводят мышь.
Уберите .fadeToggle() и поставьте .fadeIn() и .fadeOut() Замените .live на .bind или .on, или сразу mouseover, mouseout, mouseenter, mouseleave, с которыми хорошо бы тоже разобраться :) |
Цитата:
Ну да, по идее все это реализуется стилями. |
Ну что Вы, я не издеваюсь над пользователями)) Просто нужно чтобы они могли кликать на контент под исчезающим дивом)
1) Попробовал поменять на ".bind" или ".on" и заменил ".fadeToggle()" на ".fadeIn()" и ".fadeOut()". Я так уже делал - она просто мигает. Не вариант... или нужно какую-то задержку поставить или ".stop()"... Если я ставлю ".stop()", то всё перестаёт работать, а это меня немного не устраивает)) 2) Со стилями тоже не получится. Да, когда я делаю "hover" в css с "display: none" она исчезает, но постоянно мигает из за перемещения курсора по диву, что выглядит зверски)) Для наглядности кину то, что получилось с учётом новой информации: //Плашка-предупреждалка $("#omfg_outer_Oo").on("mouseover", function() { $('#omfg_outer_Oo').fadeOut(); }) $("#omfg_outer_Oo").on("mouseleave", function() { $('#omfg_outer_Oo').fadeIn(); }) |
Вот это работает, но как-то криво. Чувствуется, что что-то не то происходит. А что - понять не могу. Вернее как... курсор дрыгается, но блока нет, но посмотреть текст и нажать кнопочку за блоком можно и это главное.
$("#omfg_outer_Oo").on("mouseenter", function() { $('#omfg_outer_Oo').hide(); }) $("#omfg_outer_Oo").on("mouseleave", function() { $('#omfg_outer_Oo').fadeIn(); }) Аналогично работает конструкция: $("#omfg_outer_Oo").on("mouseenter", function() { $('#omfg_outer_Oo').fadeOut().toggle(); }) $("#omfg_outer_Oo").on("mouseleave", function() { $('#omfg_outer_Oo').fadeIn(); }) В любом случае, всем спасибо. Особенно "BETEPAH" за наводку :) |
Часовой пояс GMT +3, время: 08:40. |