Question

我找到了一个非常漂亮的图片库脚本，它只使用了CSS：http://host.sonspring.com/hoverbox/

阻止我使用它的唯一原因是悬停效果太快了。我想将悬停效果延迟一秒钟左右;意味着除非你将鼠标移动一秒钟，否则图像不会放大。我怎么能用JavaScript做到这一点？

Answer 1

我想这可以通过以下步骤完成：

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

如果你需要的话，我可能会对此进行修改以获得某种概念验证。不过，它会相当原始。一些可能的挂起可能包括：

当光标下显示另一个元素时，mouseover是否仍然适用？如果没有，会mouseout被提升，或者这些元素一旦打开就会保持打开状态吗？
在每种情况下选择合适的元素可能会很棘手。如果我们需要大量使用HTML结构或元素ID /样式，那么更新现有的CSS可能需要做更多工作才能匹配。

这是一个有趣的想法，所以我很乐意将一些注意力放在原型上。但希望只是可能涉及的内容的轮廓足以让你前进：）

编辑：好的，我对此尝试的兴趣比想象的还要大。我有一个原型here。现在悬停效果由jQuery而不是纯CSS处理。我还没有添加的唯一内容是延迟。我是looking into it。

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

为了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 transitions，而不是使用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＆lt; 10

UPD： ~~以下是我放在一起的内容：http://jsfiddle.net/gryzzly/JWk7V/3/~~

我已经更新了脚本，以包含一个脚本，您可以使用相同的HTML来处理此功能，并且仍然将CSS3与现代浏览器一起使用：http://jsfiddle.net/gryzzly/JWk7V/4/

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

2 个答案: