我可以使用：懸停觸發即使鼠標不再徘徊時也能繼續運行的CSS3動畫（或轉換）

我創建一個鏈接列表，其中一個鏈接容器在其懸停時展開（包含詳細信息，圖像和說明）。我沒有問題使用css轉換或動畫對它進行動畫處理。我可以使用：懸停觸發即使鼠標不再徘徊時也能繼續運行的CSS3動畫（或轉換）

問題是，即使在鼠標移開後我仍希望它保持展開狀態。我想這樣做沒有JavaScript。

這可能嗎？謝謝！

2012-04-10 Jaska

不，這是不可能的，因爲每個將應用在鼠標懸停上的css（:hover）將在鼠標移除時被刪除，並且沒有其他方法捕獲鼠標懸停和懸停。

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

所以你應該使用JavaScript。

來源

2012-04-10 14:34:14 noob

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-11 08:24:05 cchana

如果您確實需要避免使用JavaScript，您可以添加一段延遲以阻止您的擴展盒在一段時間內恢復爲原始大小。

在單獨的註釋中，值得爲使用觸摸屏設備的人添加a：action和a：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-06 14:03:05 Mark

而不是使用：懸停，你可以做到這一點使用的:target僞類。

看看這個fiddle

注：你需要一個現代的瀏覽器來使用此方法。（IE9 +）

而且，看看this article這顯示了一些巧妙的方法來模擬與CSS click事件（其中一個是：目標僞類

來源

2013-06-20 09:31:05 Danield

我可以使用：懸停觸發即使鼠標不再徘徊時也能繼續運行的CSS3動畫（或轉換）

回答

相關問題