hover不起作用怎麼辦-css教學-PHP中文網

首頁

web前端

css教學

hover不起作用怎麼辦

藏色散人

Mar 03, 2021 am 10:40 AM

hover

hover不起作用的解決方法：1、檢查並刪除「:hover」前的空格；2、檢查並修改正確的類別名稱；3、檢查「:hover」是否被置於「: link」和「:visited」之前，修改位置即可。

hover不起作用怎麼辦

本教學操作環境：windows7系統、HTML5&&CSS3版，DELL G3電腦。

css中hover不起作用的幾個原因：

1.在設定:hover前面加上空格：

例如

<style type="text/css">
.one {
margin: 0 auto;
width: 400px;
height: 300px;
background: #ced05d;
}
.two {
margin: 0 auto;
width: 100px;
height: 100px;
background: #5a5aea;
}
.three {
margin: 0 auto;
width: 200px;
height: 100px;
background: #4b9c49;
}
.four {
margin: 0 auto;
width: 300px;
height: 100px;
background: #7b4141;
}
.one :hover {
background: #da56d0;
}
</style>
<body>
<h1>测试</h1>
<div class="one">
<div class="two">
</div>
<div class="three">
</div>
<div class="four">
</div>
</div>
</body>

登入後複製

你發現滑鼠經過class為one的時候背景不變，而經過one裡面的其他div背景顏色發生變化，

說明:hover前加空格，本身不會有:hover的效果，而後代元素會有: hover的效果。

【推薦學習：css影片教學】

2.當滑鼠經過時，讓其他元素改變樣式：

這時候你會發現，只有後代元素和兄弟元素（緊接在元素後的兄弟元素）才有效果，其他的:hover會失效

3.類名寫錯了；

#4.: hover 被放在:link 和:visited 之前了;

在CSS 定義中，a:hover 必須被置於a:link 和a:visited 之後，才是有效的。

在 CSS 定義中，a:active 必須被放在 a:hover 之後，才是有效的。

以上是hover不起作用怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1666

CakePHP 教程

1425

Laravel 教程

1325

PHP教程

1272

C# 教程

1252

Related knowledge

CSS小技巧：利用transition保留hover狀態 Sep 27, 2022 pm 02:01 PM

如何保留 hover 的狀態？以下這篇文章跟大家介紹一下不借助javascript保留hover狀態的方法，希望對大家有幫助！

體驗即飛攜手哈浮X1相機的飛行之旅 Jan 15, 2024 pm 02:21 PM

我們經常能夠在網路上看到很多精彩的俯視視角的視頻，無人機拍出來的畫面確實相當震撼，但其實很多人對無人機的認知很有限，例如有些地方限飛為什麼還能飛？其實即開即飛的「無人機」才是當前的主流，更值得多數人選擇，今天就帶給大家哈浮飛行相機X1的上手體驗。外觀方面，哈浮飛行相機X1，首創折疊設計，整機僅125g，比手機輕，折疊後可以輕鬆手握，放進包包毫無壓力。四個軟性染葉和安全邊框設計，完美保護拍攝安全。染葉創新採用Biobased生物基材，高彈耐用，安全環保;更有全保護邊框加持，起飛降落都能貼心保護手

怎麼移除css的hover事件 Feb 01, 2023 am 10:06 AM

移除css hover事件的方法：1、；透過「$("a").hover(function(){ alert('mouseover'); }, function(){ alert('mouseout'); })」方法綁定hover事件；2、透過「$('a').off('mouseenter').unbind('mouseleave');」方法取消綁定的hover事件即可。

html中的hover的作用 Feb 20, 2024 am 08:58 AM

HTML中的hover的作用及具體程式碼範例在Web開發中，hover（懸停）是指當使用者將遊標懸停在一個元素上時，觸發一些動作或效果。它是透過CSS的:hover偽類別來實現的。在本文中，我們將介紹hover的作用以及具體的程式碼範例。首先，hover使元素在使用者懸停時可以改變其樣式。例如，將滑鼠懸停在一個按鈕上時，可以改變按鈕的背景顏色或文字顏色，以提示使用者當

csshover怎麼使用 Feb 23, 2024 pm 12:06 PM

CSS中的hover偽類是一個非常常用的選擇器，它允許我們在滑鼠懸停在元素上時改變其樣式。本文將為大家介紹hover的用法，並提供具體的程式碼範例。一、基本用法要使用hover，我們需要先為該元素定義一個樣式，然後再使用:hover偽類來製定滑鼠懸停時對應的樣式。例如，我們有一個button元素，當滑鼠懸停在按鈕上時，我們希望按鈕的背景色變為紅色，文字顏色變為白

hover為什麼是偽元素 Oct 09, 2023 pm 05:45 PM

hover不是偽元素，是偽類。偽類用於選擇元素的特定狀態或行為，而偽元素則用於在元素的特定部分中添加樣式。因為:hover用於選擇元素的特定狀態，而不是在元素的特定部分添加樣式，使用:hover偽類可以為元素的滑鼠懸停狀態添加樣式，可以透過:hover偽類為連結添加懸停效果，當滑鼠懸停在連結上時，連結的顏色、背景色等可以改變。