JavaScript延迟CSS悬停/鼠标悬停效果

Delay CSS hover/mouseover effect with JavaScript

本文关键字：悬停 鼠标 CSS JavaScript 延迟      更新时间：2023-09-26

我发现了一个非常好的图像库脚本，这里只使用CSS: http://host.sonspring.com/hoverbox/

唯一阻止我使用它的是悬停效果太快了。我想把悬停效果延迟一秒钟;意思是图像不会放大，除非你将鼠标悬停一秒钟。我如何用JavaScript做到这一点?

我认为可以通过以下步骤完成:

  1. 更改提供的CSS，使隐藏元素("弹出"图像)不会在悬停时设置其display样式。这应该足够简单，在CSS中可能没有很多display规范。
    2. 创建另一个CSS类处理display属性(设置为block，我想)。使用JavaScript，为缩略图元素的mouseover事件添加一个处理程序。在这种情况下，设置延迟，然后将新的CSS类应用于目标元素。(不要忘记在mouseout上删除这个类。

如果你需要的话，我可能会稍微修改一下，以获得某种概念的证明。不过，它还是相当原始的。一些潜在的挂机可能包括:

  1. 当光标下显示另一个元素时，mouseover是否仍然适用?如果没有，mouseout是否会被提高，或者这些元素是否会在打开后保持开放?
  2. 在每种情况下选择合适的元素可能会很棘手。如果我们不得不处理HTML结构或元素id/样式，那么可能需要更多的工作来更新现有的CSS以匹配。

这是一个有趣的想法，所以我很乐意给一些关注原型。但希望只是涉及到的概要足以让你开始:)

编辑:好吧，我比我想象的更有兴趣尝试这个。我这里有一个原型。悬停效果现在由jQuery处理，而不是纯CSS。我唯一没有添加的是延迟。我正在调查呢。

到目前为止，我唯一改变的是添加了JavaScript并从CSS中的.hoverbox a:hover .preview中删除了display属性。就是这样。

为了StackOverflow的子孙后代的利益(因为我从来没有完全信任jsfiddle来保存东西)，这里是目前为止的JavaScript代码:

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

您通常可以使用CSS过渡，而不是使用JavaScript。你也不需要在HTML中使用两个图像——你可以在将图像悬停时放大它们，并用负边距定位它们。您还可以去掉link标记。因此，对于图库中的单个项目，从这个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

乌利希期刊指南:下面是我整理的内容:http://jsfiddle.net/gryzzly/JWk7V/3/

我已经更新了脚本，包括一个脚本，你可以应用于处理这个功能与相同的HTML和仍然使用CSS3与现代浏览器:http://jsfiddle.net/gryzzly/JWk7V/4/

相关文章：