Question

我正在创建一个链接列表，其中一个链接容器在悬停时展开（包含详细信息，图像和描述）。我用css过渡或动画来制作它没有问题。

问题在于，即使鼠标移开，我也希望它能够保持扩展状态。而且我想在没有javascript的情况下这样做。

这可能吗？谢谢！

Answer 1

不可能，因为在mouseout上删除将在mouseover（:hover）上应用的每个css，并且没有其他方法可以捕获鼠标移出。

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

所以你应该使用JavaScript。

Answer 2

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仅用于添加和删除类作为necassary以保持您需要的状态。如果您没有JavaScript，那么只有:hover可以使用。

除此之外，我无法看到你如何用CSS做到这一点。

Answer 3

如果你真的需要避免使用javascript，你可以添加一个延迟来阻止扩展的盒子在一段时间内恢复原始大小。

另外一点就是值得添加一个：动作以及：为使用触摸屏设备的人们悬停。

我刚刚做了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>

干杯，标记

Answer 4

而不是使用：hover，您可以使用:target伪类来完成此操作。

查看 fiddle

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

另外，看看this article，它显示了一些用css模拟点击事件的聪明方法（其中一个是：target伪类。

我可以使用：悬停以触发CSS3动画（或过渡），即使鼠标不再悬停也能继续运行

4 个答案: