Какой простейший js-код, мне нужно было бы расширить блок отображения при наведении, чтобы он оставался там на секунду - PullRequest
Новая
       39

Какой простейший js-код, мне нужно было бы расширить блок отображения при наведении, чтобы он оставался там на секунду

0 голосов
/ 11 апреля 2011

Какой самый простой код javascript Мне нужно было бы расширить блок отображения при наведении, чтобы он оставался там на секунду, прежде чем вернуться к своему состоянию отсутствия отображения, чтобы пользователь мог щелкнуть расширенную навигацию, где по умолчанию нет отображения.в css и hover показывает блок

Мне нужен только расширенный тайм-аут, просто какой-то простой код

(у меня есть рабочее решение только в css - вместо использования display none я использовал max-size 1px и ноль альфа, так что он никогда не исчезнет, ​​но все равно хотел бы знать код javascript)

Также есть ли способ в css, что при наведении курсора будет установлен блок отображения на совершенно другой div, чем тот, который вы зависаетена

Ответы [ 3 ]

3 голосов
/ 11 апреля 2011

Предположительно, вы используете события mouseover и mouseout для отображения и скрытия блока отображения, поэтому используйте таймаут, чтобы скрыть блок. Если событие наведения мыши происходит до истечения времени ожидания, отмените его. Вот очень простой пример: 

<html>
<head>
  <title>Lingering block</title>

  <style type="text/css">
  #foo, #bar {
    width: 50px;
    height: 50px;
    background-color: green;
  }
  #bar {
    background-color: red;
  }
  </style>

  <script type="text/javascript">

  var uX = (function() {
    var timer;

    function showBar() {
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }
      document.getElementById('bar').style.display = '';
    }

    function hideBar() {
      timer = setTimeout(function () {
        document.getElementById('bar').style.display = 'none';
      },1000);
    }

    return {
      init: function() {
        var bar = document.getElementById('bar');
        var foo = document.getElementById('foo');
        foo.onmouseover = showBar;
        foo.onmouseout = hideBar;
        bar.onmouseover = showBar;
        bar.onmouseout = hideBar;
        bar.style.display = 'none';
        foo = null;
        bar = null;
      }
    };
  }());

  window.onload = uX.init;

  </script>
  </head>
  <body>
    <div id="foo"></div>
    <div id="bar"></div>
  </body>
</html>

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

0 голосов
/ 11 апреля 2011

Мне кажется, что вы почти ответили сами.Если у вас уже есть «решение» в CSS, просто используйте Javascript, чтобы отменить этот параметр.

Что-то вроде:

onMouseOver = setInterval ("this.style.opacity = 0", 1000);

Этот (непроверенный psuedocode) установит непрозрачность в 0 через секунду (1000 мс).

Вы, очевидно, могли бы стать хитрее - вы, вероятно, захотите сбросить CSS до обычного onMouseOut,Но в основном просто измените CSS, который вы нашли динамически, используя скрипт.

Я мог бы что-то упустить, конечно.

0 голосов
/ 11 апреля 2011

Я думаю, вам стоит взглянуть на JQUERY UI .Я думаю, что это будет служить вашей цели, и вы также можете заглянуть в скрипт Jquery UI, чтобы узнать, что происходит внутри JavaScript ...

...