「懸停」效果（類似SO）

如果你曾經使用過的StackOverflow在iPad上，你可能已經注意到，爲了刪除評論，您：「懸停」效果（類似SO）

第一抽頭註釋字段
領域獲取灰色突出顯示和刪除圖標顯示爲灰色
那麼您可以點擊該圖標刪除評論

在桌面，這個過程是因爲更簡單老鼠可以將鼠標懸停在評論上，通過jQuery .css隱藏並在mouseenter和mouseleave上顯示圖標。

我已經在我的博客上設置了一個帖子和評論系統，這個功能非常類似於桌面上運行的SO，但我不知道如何實現SO的iPad功能。

任何想法如何使得單擊可以充當懸停在評論上？

來源

2011-07-19 pepe

爲了呼應科裏，我覺得* *的iOS（或者說移動Safari瀏覽器），在很多情況下會自動處理這個問題。關鍵是要找到它自動爲您處理轉換的特定情況。 –

任何時候我編寫了任何對jQuery或Mootools中的mouseenter進行響應的代碼，iPad立即將此行爲轉換爲單擊。這包括通常只需一次點擊即可將您帶到另一個頁面的鏈接。這不是你所看到的行爲嗎？

來源

2011-07-19 01:47:29

好點@cory，我只是再次檢查，注意到當我點擊評論容器（我用它來觸發mouseenter上的圖標可見性）沒有任何反應。但如果我點擊該容器內的一個不相關的鏈接（例如，「添加評論」，類似於SO），那麼圖標顯示 - 也許我需要改變我的代碼 – pepe

使用jQuery你可以寫一個click事件：

$(".comment").click(function(e){ 
    e.preventDefault(); 
    $(this).toggleClass("clicked"); 
});

，並創建一些iPad-only CSS這樣的：

<div class="comment">... <a class="delete">Delete</a></div>

：

.comment .delete 
{ 
    display: none; 
} 

.comment.clicked .delete 
{ 
    display: inline; 
}

如果您的HTML是這樣的，其將工作

並將它們連接到它們自己的ipad.css和ipad.js文件中幷包含時間在你的<head>

<!--[if iPad]> 
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" /> 
<script type="text/javascript" src="ipad.js"></script> 
<![endif]-->

工作示例：http://jsfiddle.net/hunter/pqLXS/

來源

2011-07-19 02:06:59 hunter

thx @hunter - 現在的問題是桌面我需要從你的例子中的紅色刪除顯示在懸停（mouseenter） - 我已經實現 - 但在iPad上'刪除'需要顯示在點擊 - 任何想法如何適應你的例子？ – pepe

查看更新.... – hunter

「懸停」效果（類似SO）

回答

相關問題