JavaScript & Delay on Hovering Links?

Question

Is there a way through JavaScript to set the links on a timer before its closes out? I don't want it to seem so sensitive. Such as if a user accidentally mouses off the link it closes right away. Any video recommendation or links?

Thanks,

I am not using jQuery......

* {
  padding: 0;
  margin: 0;
}
body {
  padding: 5px;
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
}
ul {
  list-style: none;
}
ul li {
  float: left;
  padding-right: 1px;
  position: relative;
}
ul a {
  display: table-cell;
  vertical-align: middle;
  width: 100px;
  height: 50px;
  text-align: center;
  background-color: #2F2F2F;
  color: #AE0002;
  text-decoration: none;
}
ul a:hover {
  background-color: #828282;
  color: #FFFFFF;
}
li > ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
}
li:hover > ul {
  display: block;
}
li > ul li {
  padding: 0px;
  padding-top: 1px;
}
li > ul li > ul {
  left: 100%;
  top: 0;
  padding-left: 1px;
}
li > ul li > ul li {
  width: 100px;
}

<body>
  <ul>
    <li><a href="#">Sports News</a>
      <ul>
        <li><a href="#">Football</a>
          <ul>
            <li><a href="http://www.nfl.com/">NFL</a>
            </li>
            <li><a href="http://espn.go.com/nfl/">ESPN Football</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Baseball</a>
          <ul>
            <li><a href="http://mlb.mlb.com/home">MLB</a>
            </li>
            <li><a href="http://espn.go.com/mlb/">ESPN Baseball</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Soccer</a>
          <ul>
            <li><a href="http://www.fifa.com/">FIFA</a>
            </li>
            <li><a href="http://www.espnfc.us/">ESPN Soccer</a>
            </li>
          </ul>
        </li>

        <li><a href="#">Basketball</a>
          <ul>
            <li><a href="http://www.nba.com/">NBA</a>
            </li>
            <li><a href="http://espn.go.com/nba/">ESPN Basketball</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Auto Racing</a>
          <ul>
            <li><a href="http://espn.go.com/racing/">ESPN Racing</a>
            </li>
            <li><a href="http://www.nascar.com/en_us/sprint-cup-series.html">Nascar</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</body>

setting ul to block on hover of li, instead of css you can do this using javascript. handle mouseover and mouseout events to show/hide. To delay, on hover, show using timer and on mouseout, hide as well as clear the timer. — gp., Oct 31 '14 at 02:02

gp. · Accepted Answer · 2014-10-31T02:25:39.243

Instead of css, show/hide ul using javascript. Handle mouseover and mouseout events to show/hide. To delay, on hover, show using timer and on mouseout, hide as well as clear the timer.

function show(ul) {
    ul.css("display", "inline-block");
}

function hide(ul) {
    ul.css("display", "none");
}

$("li").mouseover(function () {
    var ul = $(this).children("ul");
    var timer = setTimeout(function () {
        show(ul);
    }, 400);
    $(this).data("timer", timer);

}).mouseout(function () {
    var ul = $(this).children("ul");
    var timer = $(this).data("timer");
    clearTimeout(timer);
    hide(ul);
});

Demo: http://jsfiddle.net/k06dLnmk/

score 0 · Answer 2 · edited May 23 '17 at 12:20

0

You can use transition delay.

transition-delay:1s;

JavaScript & Delay on Hovering Links?

2 Answers2