7

我正在创建一个链接列表，其中一个链接容器在悬停时会展开（带有详细信息、图像和描述）。我可以使用 css 过渡或动画对其进行动画处理。

问题是我希望它即使在鼠标移开后也能保持扩展。而且我想在没有javascript的情况下做到这一点。

那可能吗？谢谢！

4

4 回答 4

1

如果您确实需要避免使用 javascript，则可以添加延迟以阻止展开的框在一段时间内恢复为原始大小。

另外值得注意的是，为使用触摸屏设备的人添加 :action 和 :hover 是值得的。

在这里，我刚刚完成了 3 秒。它会在指定时间后恢复到原始大小，但根据您的需要可能会有所帮助。

<!DOCTYPE html>
<html>
<head>
<style>
   .div{
        height:100px;
        width:50px;
        background:red;
        transition: width 0.5s ease;
        transition-delay:3s;
   }
   .div:hover, .div:action
   {
        width:400px;
        transition: width 0.5s ease;
   }
</style>
</head>
<body>

<div class="div"></div>

</body>
</html>

干杯，马克

于 2013-06-06T14:03:05.547 回答
1

而不是使用 :hover 你可以使用:target伪类来做到这一点。

看看这个小提琴

注意：您需要现代浏览器才能使用此方法。(IE9+)

另外，看看这篇文章，它展示了一些用 css 模拟点击事件的巧妙方法（其中一个是 :target 伪类。

于 2013-06-20T09:31:05.850 回答
1

http://www.impressivewebs.com/css3-transitions-javascript/这篇文章有一个演示，展示了如何根据需要添加/删除一个类来保持动画的运行。您可以做的是将当前的:hover转换保留在适当的位置作为后备，但对于那些使用 JavaScript 的人，也可以将相同的样式应用于类pseudoHover或其他东西。

然后使用 JavaScript（如下所示的 jQuery）在将鼠标悬停在元素上时添加类，这里是非常基本的示例：http: //jsfiddle.net/btg5y/

HTML：

<div id="list">
<p>Hover over me!</p>
<ul>
    <li>item 1</li>
    <li>item 2</li>
</ul>
</div>
<p>Click anywhere here to remove the hover</p>

JS：

$('#list').hover(function() {
    $('ul', this).addClass('pseudoHover');
});
$(document).click(function() {
    $('#list ul').removeClass('pseudoHover');
});

CSS：

ul {
    background-color: #F00;
    height: 0;
    overflow: hidden;
    transition: height 1s;
    -webkit-transition: height 1s;
}
#list:hover ul, .pseudoHover {
    height: 50px;
}

JavaScript 仅用于添加和删除一个类，以保持您需要的状态。如果您没有 JavaScript，那么只有:hover将起作用。

除此之外，我看不出您如何仅使用 CSS 来做到这一点。

于 2012-04-11T08:24:05.723 回答
1

不，这是不可能的，因为将在 mouseover ( :hover) 上应用的每个 css 都将在 mouseout 时删除，并且没有其他方法可以捕获 mouseover 和 out。

#animate:hover {
    /* ex. -webkit- -moz- -ms- -o-​ */ animation: animation 2s infinite; /* will be directly aborted on mouseout :( */
}

因此，您应该为此使用 JavaScript。

于 2012-04-10T14:34:14.087 回答