Задержка эффекта CSS при наведении курсора мыши

Question

Я нашел очень хороший скрипт галереи изображений, который использует только CSS: http://host.sonspring.com/hoverbox/

Единственное, что мешает мне использовать его, это то, что эффект наведения слишком быстрый. Я хотел бы отложить эффект парения примерно на секунду; Это означает, что изображение не будет увеличиваться, если вы не наведите курсор мыши на секунду. Как я могу сделать это с помощью JavaScript?

Answer 1

Я полагаю, что это можно сделать в следующих шагах:

1. Измените CSS, чтобы скрытые элементы («всплывающие» изображения) не устанавливали свои стили display при наведении курсора. Это должно быть достаточно просто, вероятно, в CSS не так уж много спецификаций display.
2. Создайте еще один класс CSS, который обрабатывает свойство display (устанавливает его на block, я думаю).
3. Используя JavaScript, добавьте обработчик к событию mouseover для миниатюрных элементов. В этом случае установите задержку, а затем примените новый класс CSS к целевому элементу. (Не забудьте удалить этот класс на mouseout.

Я мог бы, вероятно, немного повозиться с этим, чтобы получить какое-то подтверждение концепции, если вам нужно. Хотя это будет довольно примитивно. Несколько возможных зависаний могут включать в себя:

1. Будет ли mouseover применяться, когда под курсором отображается другой элемент? Если нет, будет ли mouseout поднят или эти элементы останутся открытыми после открытия?
2. Выбор правильного элемента в каждом случае может оказаться сложным. Если нам придется много разбираться со структурой HTML или идентификаторами / стилями элементов, тогда может потребоваться дополнительная работа по обновлению существующего CSS для соответствия.

Это интересная идея, поэтому я буду рад уделить 1028 * внимания прототипу. Но, надеюсь, просто набросок того, что может быть вовлечено, достаточен, чтобы вы начали:)

Редактировать: Хорошо, меня больше интересовало это, чем я думал. У меня есть прототип здесь . Эффект наведения мыши теперь обрабатывается jQuery, а не чистым CSS. Единственное, что я еще не добавил, - это задержка. Я смотрю на это .

Пока что я изменил только добавление JavaScript и удаление свойства display из .hoverbox a:hover .preview в CSS. Вот и все.

В интересах потомков в StackOverflow (и поскольку я никогда полностью не доверяю jsfiddle сохранять вещи), вот код JavaScript:

$(document).ready(function() {
    $('.hoverbox a').mouseover(function() {
        $(this).children('.preview').show();
    });
    $('.hoverbox a').mouseout(function() {
        $(this).children('.preview').hide();
    });
});

Answer 2

Обычно вы можете использовать CSS-переходы вместо JavaScript.Вам также не нужно использовать два изображения в HTML - вы можете увеличить изображения при наведении на них курсора и расположить их с отрицательными полями.Вы также можете избавиться от тега ссылки.Итак, для одного элемента галереи, из этого HTML:

<li> 
  <a href="#">
    <img src="img/photo01.jpg" alt="description" />
    <img src="img/photo01.jpg" alt="description" class="preview" />
  </a> 
</li>

Вы получаете следующее:

<li>
  <img src="http://host.sonspring.com/hoverbox/img/photo01.jpg" alt="description" />
</li>

И в CSS вы делаете что-то вроде этого:

.hoverbox img {
    /* 
       in order to uze z-index you need 
       to have position:absolute or relative set
    */
    position:relative;
    background: #fff;
    border-color: #aaa #ccc #ddd #bbb;
    border:1px solid;
    padding: 2px;
    width: 100px;
    height: 75px;
    /*
      CSS3 transition shorthand order:
      transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
      if you don't specify values for transition-property, default is "all"
      if you don't specify values for transition-timing-function, default is linear
    */
    -webkit-transition:.01s 1s;
    -moz-transition:.01s 1s;
    -o-transition:.01s 1s;
    transition:.01s 1s;
}
.hoverbox img:hover {
    z-index:1;
    width:200px;
    height:150px;
    margin:-37px -50px;
    border-color:#000;
}

Это не будет работать в нетрадиционных браузерах :( а именно: IE <10 </p>

UPD: Вот что я собрал: http://jsfiddle.net/gryzzly/JWk7V/3/

IМы обновили скрипт, добавив в него скрипт, который можно применять для обработки этой функциональности с тем же HTML и при этом использовать CSS3 в современных браузерах: http://jsfiddle.net/gryzzly/JWk7V/4/