Имитация наведения при помощи jQuery - PullRequest
Новая
       0

Имитация наведения при помощи jQuery

8 голосов
/ 02 марта 2011

Учитывая существующие "кнопки"

HTML: 

 <div id="MB">
    <ul class="list">
       <li id="post-5"><a href="#post-5">5</a></li>
       <li id="post-4"><a href="#post-4">4</a></li>
       <li id="post-3"><a href="#post-3">3</a></li>
       <li id="post-2"><a href="#post-2">2</a></li>
       <li id="post-1"><a href="#post-1">1</a></li>
    </ul> 
 </div>

CSS: 

  #MB .list li a {
        float:left;
        color:#333;
        background:#f6f6f6;
        border:1px solid #eaeaea;
        border-right:none;
        padding:0 8px;
        }

   #MB .list li a:hover,
   #MB .list li a:focus {
        color:#fff;
        border:1px solid #333333;
        border-right:none;
        background:#404040;
        text-decoration:none;
        }

Я бы хотел автоматически имитировать "зависание" на каждой кнопкепоследовательно, каждые n секунд.

Это означает, что каждые n секунд кнопка «зависает» (меняет цвет и т. Д.), На следующем интервале «выключается», а следующая кнопка «включается» и т. Д. ...

Ответы [ 5 ]

6 голосов
/ 02 марта 2011

Я бы использовал setInterval и jQuery.trigger('mouseover', …).

5 голосов
/ 02 марта 2011 
#MB .list a:hover,
#MB .list a:focus,
#MB .list .active a {
  /* hover styles */
}

(я немного упростил ваши селекторы, я бы также предложил попробовать удалить внешние div, так как они часто не нужны, и достаточно только ul)

Javascript hover: 

function setHover() {
    if ($('#MB .list .active').next().length) {
        $('#MB .list .active').next().addClass('active').end().removeClass('active');
    } else {
        $('#MB .list .active').removeClass('active');
        $('#MB .list li:first-child').addClass('active');
    }
}

setInterval(setHover, 1000);
1 голос
/ 02 марта 2011

Эта ссылка даст вам код и инструкции для этого!

http://forum.jquery.com/topic/simulate-hover-event

0 голосов
/ 30 марта 2013

Попробуйте добавить в ссылку onClick = "return true" тег href 

<a href="../about.php" onMouseOver="mopen('m2')" onMouseOut="mclosetime()" onClick="return true">About us</a>

. OnClick = "true true" должно имитировать курсор, который перемещается и затем покидает область наведения.эффективно давая вам эффект наведения.

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

0 голосов
/ 02 марта 2011

Определите третий селектор, например

# МБ .list li a: hover, # МБ .list li a: focus, # MB .list li a.simFocus {…}

, а затем добавьте и удалите класс «simFocus», основанный на времени для каждого кода JavaScript.

...