.mouseenter добавляет «переполнение: нет». Как я могу предотвратить это?И как я могу имитировать hoverIntent? - PullRequest
Новая
       50

.mouseenter добавляет «переполнение: нет». Как я могу предотвратить это?И как я могу имитировать hoverIntent?

1 голос
/ 01 февраля 2012

Итак, у меня странная проблема.

У меня есть лента, движущаяся за навигацией при наведении на предметы, и она содержит старый трюк css-corner, чтобы нарисовать форму ленты.Они расположены по отрицательному нижнему свойству.Как ни странно, события .mouseenter, кажется, добавляют класс «overflow: none» к «this».Есть ли способ предотвратить это?

И мой второй вопрос: как я могу предотвратить запуск .mouseenter, если мышь просто проходит мимо, вроде hoverIntent.Я думал, что Mouseenter делает это, но, очевидно, нет.

Любые советы о том, как сделать это короче и лучше, также приветствуются.Вот код, я запускаю скрипт noConflict, поэтому «j» переводится в $: 

function rbHover(){


    j("#nav li a")
        .on('mouseenter', function() {

        var l = j(this).parent().position().left;
        var w = j(this).parent().width();
        var rbw = Math.round(w/4);
        var rbh = Math.round(w/16);

            j("#ribbon").stop('ribbon', true, true).animate({
                "left" : l,
                "width" : w }, {
                    duration: 600,
                    easing: 'swing', 
                    queue: 'ribbon'
                 }).dequeue('ribbon');

            j(".rib-left").stop('rib-left', true, true).animate({
                "border-right-width": rbw,
                "border-left-width": rbw,
                "border-top-width": rbh,
                "border-bottom-width": rbh,
                "bottom": "-" + (2*rbh) + "px"}, {
                    duration:600,
                    easing: 'swing', 
                    queue: 'rib-left'
                 }).dequeue('rib-left');

            j(".rib-right").stop('rib-right', true, true).animate({
                "border-right-width": rbw,
                "border-left-width": rbw,
                "border-top-width": rbh,
                "border-bottom-width": rbh,
                "bottom": "-" + (2*rbh) + "px"}, {
                    duration:600,
                    easing: 'swing', 
                    queue: 'rib-right'
                 }).dequeue('rib-right');
        })

        .on('mouseleave', function() {

        var l = j(".active").parent().position().left;
        var w = j(".active").parent().width();
        var rbw = Math.round(w/4);
        var rbh = Math.round(w/16);

            j("#ribbon").stop('ribbon', true).delay(300, 'ribbon').animate({
                "left" : l,
                "width" : w }, {
                    duration: 600,
                    easing: 'swing', 
                    queue: 'ribbon'
                 }).dequeue('ribbon');

            j(".rib-left").stop('rib-left', true, true).delay(300, 'rib-left').animate({
                "border-right-width": rbw,
                "border-left-width": rbw,
                "border-top-width": rbh,
                "border-bottom-width": rbh,
                "bottom": "-" + (2*rbh) + "px"}, {
                    duration:600,
                    easing: 'swing', 
                    queue: 'rib-left'
                 }).dequeue('rib-left');

            j(".rib-right").stop('rib-right', true, true).delay(300, 'rib-right').animate({
                "border-right-width": rbw,
                "border-left-width": rbw,
                "border-top-width": rbh,
                "border-bottom-width": rbh,
                "bottom": "-" + (2*rbh) + "px"}, {
                    duration:600,
                    easing: 'swing', 
                    queue: 'rib-right'
                 }).dequeue('rib-right');
        });
}

Мой сайт находится здесь: http://www.egegorgulu.com

1 Ответ

2 голосов
/ 01 февраля 2012

Это не .mouseenter(), что вызывает установку overflow:hidden, а скорее то, что вы делаете в ответ на событие mouseenter; другими словами, .animate() звонки. Если честно, я не знаю, почему jQuery устанавливает это свойство css, но я уверен, что следующее решит это:

  1. Вместо того, чтобы придавать #ribbon цвет фона, добавьте дополнительный ребенок <div> с фоновым цветом
  2. Сделав это, вы можете сделать высоту #ribbon полной высотой ленты (то есть, включая треугольные кусочки). Таким образом, overflow:hidden не будет отрезать эти треугольные кусочки.

Что касается идеи "hoverIntent", вероятно, существуют некоторые сценарии, которые занимаются этой проблемой. Тем не менее, вы должны действительно опубликовать второй вопрос для этого. Каждый пост должен содержать только один вопрос.

...