Имитация наведения с помощью jQuery

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

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 секунд кнопка " зависает "(изменение цвета и т. д.), На следующем интервале" выключается", а следующая кнопка" включается " и т. д...

8
css hover jquery

5 ответов

#MB .list a:hover,
#MB .list a:focus,
#MB .list .active a {
  /* hover styles */
}

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

в JavaScript при наведении:

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);
4

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

6

эта ссылка здесь даст вам код и инструкции, чтобы сделать это!

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

1

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

#MB .список li a: hover,#MB .список ли a: фокус,#MB .список li a.simFocus { … }

а затем добавьте и удалите класс "simFocus" на основе времени для кода javascript.

0

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

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

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

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

-1