我正在创建一个链接列表，其中一个链接容器在悬停时会展开（包含详细信息、图像和描述）。使用 css 过渡或动画对其进行动画处理没有任何问题。
问题是我希望即使在鼠标移开后它也能保持扩展。我想在没有javascript的情况下做到这一点。
这可能吗？谢谢！
不，这是不可能的，因为每个将应用于鼠标悬停 （ :hover ） 的 css 将在鼠标悬停时删除，并且没有其他方法可以捕获鼠标悬停和移出。
#animate:hover {
/* ex. -webkit- -moz- -ms- -o- */ animation: animation 2s infinite; /* will be directly aborted on mouseout :( */
}
所以你应该使用 JavaScript 来实现这一点。
> 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 做到这一点。
如果你真的需要避免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>
干杯马克
您可以使用 :target 伪类来执行此操作，而不是使用 ：hover。
看看这个小提琴
注意：您需要现代浏览器才能使用此方法。（IE9+）
另外，看看这篇文章，它展示了一些用css模拟点击事件的聪明方法（其中之一是：target伪类。