Question

有没有办法让JavaScript在关闭之前设置定时器上的链接？我不希望它看起来那么敏感。例如，如果用户意外地将其关闭的链接立即关闭。任何视频推荐或链接？

谢谢，

我没有使用jQuery ......

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

Answer 1

使用javascript显示/隐藏ul而不是css。处理mouseover和mouseout事件以显示/隐藏。要延迟，在悬停时，显示使用计时器和鼠标输出，隐藏并清除计时器。

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

演示：http://jsfiddle.net/k06dLnmk/

Answer 2

您可以使用转换延迟。

transition-delay:1s;

类似的问题：

Delay hover

或者您可以使用javascript与css clasess进行切换

window.setInterval("javascript function", milliseconds);

编辑：哦，抱歉，评论指出。 display none不适用于转换延迟。您会考虑使用visibility属性吗？

div > ul {
  . . .
  visibility:hidden;
  opacity:0;
  transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}
div:hover > ul {
  visibility:visible;
  opacity:1;
  transition-delay:0s;
}

JavaScript＆amp;延迟悬停链接？

2 个答案: