Выполняйте hover (), только когда НЕ зависаете над определенным элементом - PullRequest
Новая
       2

Выполняйте hover (), только когда НЕ зависаете над определенным элементом

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

у меня есть эта проблема, когда я кодирую небольшую таблицу с эффектом наведения, заставляя ее менять строки.Однако в оригинале я тоже хочу использовать ссылки.Когда пользователь наводит указатель мыши на эти ссылки, я не хочу, чтобы эффект наведения мыши имел место.

Соответствующий код, в котором popup - это класс строки (при наведении на нее активируетсяhoverIntent, чтобы изменить эти строки в другие).Исключаемый span со ссылкой внутри имеет класс с именем linky.: 

<script type="text/javascript">
    $(document).ready(function(){
        $(".popup").hoverIntent( hover, original );

    });



    function hover(){
        $(this).addClass("hovering"); 
        $(".hovering .original").fadeOut(50, function() { 
            $(".hovering .hover").fadeIn(300); 
        });
    }

    function original(){
        $(".hovering .hover").fadeOut(50, function() { 
            $(".hovering .original").fadeIn(300); 
            $(".popup").removeClass("hovering"); 
        });
    }

</script>

<table>
  <tr class='header'>
    <th>row</th>
    <th>row</th>
    <th>row</th>
    <th>row (the ones below are just a javascript fix, because it otherwise changes position on hover, when using this system. They are not visible.)</th>
    <th>row</th>
    <th>row</th>
  </tr>
  <tr class='popup'>
    <td class='original'>First column</td>
    <td class='original'><span class='linky'><a>mylink</a></span><!-- this span should be excluded --></td>
    <td class='original'>Third column</td>
    <td class='hover' style='display:none;'>this one gets displayed when hovering 1</td>
    <td class='hover' style='display:none;'>this one gets displayed when hovering 2</td>
    <td class='hover' style='display:none;'>this one gets displayed when hovering 3</td>
  </tr>
</table>

Извините, если что-то забыл, но пришлось все переписать, потому что он встроен вPHP-скрипт.

С уважением, Aart

1 Ответ

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

Как-то так должно работать 

var linkIsHovered  = false; 

$(document).ready(function(){
    $(".popup").hoverIntent( hover, original )
      .delegate("a", "mouseover", flagLinkHover)
       .delegate("a", "mouseout", flagLinkUnHover);

});

function flagLinkHover() {
  linkIsHovered = true;
} 

function flagLinkUnHover() {
  linkIsHovered = false;
} 

function hover(){
    if (linkIsHovered) {return}
    $(this).addClass("hovering"); 
    $(".hovering .original").fadeOut(50, function() { 
        $(".hovering .hover").fadeIn(300); 
    });
}

function original(){
    if (linkIsHovered) {return}
    $(".hovering .hover").fadeOut(50, function() { 
        $(".hovering .original").fadeIn(300); 
        $(".popup").removeClass("hovering"); 
    });
}

Если вы не используете hoverIntent, вышеприведенное, вероятно, не сработает, поскольку вам придется снимать очередь и отменять частично завершенные анимации, но с hoverIntent это сработаетвероятно, будет достаточно использовать вышеуказанный подход.

...