」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 如何調整 :hover 動畫以實現行動裝置互動?

如何調整 :hover 動畫以實現行動裝置互動?

發佈於2024-12-21
瀏覽:597

How to Adjust :hover Animations for Mobile Device Interaction?

調整:hover 動畫以實現移動設備交互

您遇到了以下問題:展開面板的:hover CSS 動畫不會在移動設備上觸發設備由於沒有滑鼠懸停。為了解決這個問題,您的目標是在頁面寬度低於 700 像素時將觸發器切換為「點擊」或「觸控」。

要實現此目的,您可以結合使用 :hover 和 :active 選擇器。透過在 CSS 中對選擇器進行排序:在 :hover 之後使用 :active,您可以確保面板上的觸控或點擊操作也會觸發動畫。這是更新後的 CSS:

.info-slide:hover, .info-slide:active {
  height: 300px;
}

此變更可確保面板在桌面和行動裝置上懸停或觸碰時展開。為了驗證其功能,建議在實際的移動環境中進行測試,因為模擬器可能無法提供準確的結果。

最新教學 更多>
  • 深入研究 Reactjs
    深入研究 Reactjs
    模因生成器 Meme Generator 是一個有趣的互動式 Web 應用程序,允許用戶使用各種模板創建自訂 Meme。我已經透過教育平台學習軟體開發幾個月了,這個專案是課程的一部分。 目錄 示範 特徵 技術堆疊 安裝 用法 作者 執照 表達您的支持 ...
    程式設計 發佈於2024-12-21
  • 如何使用 CSS 禁用連結?
    如何使用 CSS 禁用連結?
    CSS停用連結技巧問題:是否可以使用CSS停用連結?例如,如果您有一個名為“當前頁面”的類,您可能希望阻止該類的連結在單擊時處於活動狀態。 解決方案:以下 CSS 程式碼片段提供了一個簡單的解決方案:[aria-current="page"] { pointer-events...
    程式設計 發佈於2024-12-21
  • 如何讓我的 Python 類別 JSON 可序列化?
    如何讓我的 Python 類別 JSON 可序列化?
    使 Python 類別 JSON 可序列化序列化允許將物件轉換為適合持久或傳輸的格式。在 JSON 中序列化自訂類別通常會導致 TypeError,因為它們的非 JSON 可序列化性質。 實作 toJSON() 方法一種方法是建立一個類別的 toJSON() 方法,手動處理其序列化。這需要實作自訂 ...
    程式設計 發佈於2024-12-21
  • 如何在 PHP 中正確使用 INSERT INTO 準備語句?
    如何在 PHP 中正確使用 INSERT INTO 準備語句?
    將準備好的語句與INSERT INTO 合併在遍歷PHP 的迷宮深度:資料物件時,在嘗試執行MySQL 時出現了一個令人困惑的難題使用準備好的語句進行查詢,特別是用於INSERT INTO 操作。考慮以下程式碼片段:$statement = $link->prepare("INSER...
    程式設計 發佈於2024-12-21
  • 為什麼 `Class object();` 不建立 C++ 物件?
    為什麼 `Class object();` 不建立 C++ 物件?
    瞭解建構函式呼叫的缺失在 C 中,建構子用來初始化類別的物件。然而,在提供的程式碼片段中,構造函數並沒有被調用,導致意外的行為。 問題有問題的行:Class object();其實並沒有呼叫 Class 類別的建構子。相反,它宣告一個傳回 Class 物件的函數。要正確呼叫建構函式並建立對象,必須在...
    程式設計 發佈於2024-12-21
  • PHP 中的靜態類別與實例化類別:何時選擇什麼?
    PHP 中的靜態類別與實例化類別:何時選擇什麼?
    PHP 中的靜態類別與實例化類別理解靜態類別和實例化類別之間的區別在物件導向程式設計中至關重要。 PHP 作為一種流行的物件導向語言,提供了這兩種選擇。本文旨在闡明它們的適當用法。 差異與適用性靜態類別與實例化物件不同,不保存特定資料且不能複製。它們用作執行特定任務而不維護實例狀態的實用函數。 另一...
    程式設計 發佈於2024-12-21
  • ES6 計算屬性如何解決動態物件初始化挑戰?
    ES6 計算屬性如何解決動態物件初始化挑戰?
    在ES6 的物件初始化中使用動態屬性名稱在程式設計中經常會出現使用從外部來源派生的屬性名稱建立對象的挑戰。在查詢中描述的場景中,我們嘗試建構一個 JavaScript 對象,其屬性的鍵在單獨的變數 KEYS 中定義。 但是,在為物件內的屬性賦值時,我們遇到錯誤由於使用了點運算子 (.)。此運算符是為...
    程式設計 發佈於2024-12-21
  • 大批
    大批
    方法是可以在物件上呼叫的 fns 數組是對象,因此它們在 JS 中也有方法。 slice(begin):將陣列的一部分提取到新數組中,而不改變原始數組。 let arr = ['a','b','c','d','e']; // Usecase: Extract till index ...
    程式設計 發佈於2024-12-21
  • 為什麼 Margin Top 不適用於 CSS 中的內聯元素?
    為什麼 Margin Top 不適用於 CSS 中的內聯元素?
    頂部邊距和內聯元素在 CSS 中,margin 屬性用於定義元素邊框之外的間距。然而,在內聯元素上使用 margin top 時會出現一個常見問題,特別是在 Firefox 中。 問題:為什麼內聯元素的 margin top 似乎被忽略在 Firefox 中? 答案:此行為並非 Firefox 獨有...
    程式設計 發佈於2024-12-21
  • 如何使用XPath透過CSS類別高效定位HTML元素?
    如何使用XPath透過CSS類別高效定位HTML元素?
    使用 XPath 按 CSS 類別尋找元素在網頁擷取中,通常需要根據 CSS 類別來定位 HTML 元素。 XPath 是一個用於導航 XML 和 HTML 文件的強大工具,它提供了一種實現此目的的方法。 考慮一個 HTML 頁面,其中的 div 元素具有名為「Test」的類別。以下XPath 查詢...
    程式設計 發佈於2024-12-21
  • 儘管程式碼有效,為什麼 POST 請求無法擷取 PHP 中的輸入?
    儘管程式碼有效,為什麼 POST 請求無法擷取 PHP 中的輸入?
    解決PHP 中的POST 請求故障在提供的程式碼片段中:action=''而非:action="<?php echo $_SERVER['PHP_SELF'];?>";?>"檢查$_POST陣列:表單提交後使用 var_dump 檢查 $_POST 陣列的內...
    程式設計 發佈於2024-12-21
  • 為什麼 `array_shift()` 會觸發「嚴格標準:只有變數應該透過引用傳遞」?
    為什麼 `array_shift()` 會觸發「嚴格標準:只有變數應該透過引用傳遞」?
    錯誤訊息「Strict Standards: Only Variables Should Be Passed by Reference」使用array_shift() 時,可能會報告嚴格標準如果傳遞的參數是函數呼叫的結果,則會發出警告。這種行為看起來不一致,因為它並不總是觸發警告。 考慮以下程式碼:...
    程式設計 發佈於2024-12-21
  • 如何在 Pandas 中進行聚合?
    如何在 Pandas 中進行聚合?
    Pandas 中的聚合如何使用 Pandas 執行聚合? 聚合函數會降低傳回物件的維度。一些常見的聚合函數包括mean()、sum()、size()、count()、std()、var()和sem()。 df1 = df.groupby(['A', 'B'], as_index=False)['C'...
    程式設計 發佈於2024-12-21
  • 如何在 C++ 中初始化靜態 `const std::string` 資料成員?
    如何在 C++ 中初始化靜態 `const std::string` 資料成員?
    宣告const std::string 類型的靜態資料成員在C 中,直接在類別定義中初始化const std::string 類型的靜態資料成員是不允許。相反,有兩個選項可以定義此類資料成員:內聯變數(C 17 或更高版本)使用內聯變量,它定義並初始化類別定義中的靜態成員:class A { pri...
    程式設計 發佈於2024-12-21
  • 如何在 Python 中從函數內部取得函數名稱?
    如何在 Python 中從函數內部取得函數名稱?
    從函數內部存取函數名稱在Python 中,從函數本身內部確定函數名稱在動態自省的情況下非常有用inspect 模組提供了一個方便的機制來獲取有關正在運行的程式碼的資訊。使用inspect.stack(),我們可以存取表示目前呼叫堆疊的幀列表。 對於給定的函數,堆疊列表中的第一幀對應於當前函數,而第二...
    程式設計 發佈於2024-12-21

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3