Solution for hover not working: 1. Check and delete the space before ":hover"; 2. Check and modify the correct class name; 3. Check whether ":hover" is placed in ":hover" link" and ":visited", just modify the location.
The operating environment of this tutorial: windows7 system, HTML5&&CSS3 version, DELL G3 computer.
There are several reasons why hover in css does not work:
1. Add a space before setting:hover:
For example,
<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 id="测试">测试</h1>
<div class="one">
<div class="two">
</div>
<div class="three">
</div>
<div class="four">
</div>
</div>
</body>you find that the mouse When the class is one, the background remains unchanged, but the background color of other divs inside one changes.
Explanation: Adding a space before hover will not have the effect of :hover, but the descendant elements will have: hover effect.
[Recommended learning: css video tutorial]
2. When the mouse passes over, let other elements change styles:
You will find at this time , only descendant elements and sibling elements (sibling elements immediately after the element) have an effect, other :hover will be invalid
3. The class name is written wrong;
4.: hover is placed before :link and :visited;
In the CSS definition, a:hover must be placed after a:link and a:visited to be valid.
In the CSS definition, a:active must be placed after a:hover to be valid.
The above is the detailed content of What to do if hover doesn't work. For more information, please follow other related articles on the PHP Chinese website!
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事件即可。
hover为什么是伪元素Oct 09, 2023 pm 05:45 PMhover不是伪元素，是伪类。伪类用于选择元素的特定状态或行为，而伪元素则用于在元素的特定部分添加样式。因为:hover用于选择元素的特定状态，而不是在元素的特定部分添加样式，使用:hover伪类可以为元素的鼠标悬停状态添加样式，可以通过:hover伪类为链接添加悬停效果，当鼠标悬停在链接上时，链接的颜色、背景色等可以发生变化。
css中hover怎么使用Feb 23, 2024 pm 12:06 PMCSS中的hover伪类是一个非常常用的选择器，它允许我们在鼠标悬停在元素上时改变其样式。本文将为大家介绍hover的用法，并提供具体的代码示例。一、基本用法要使用hover，我们需要先为该元素定义一个样式，然后使用:hover伪类来制定鼠标悬停时对应的样式。例如，我们有一个button元素，当鼠标悬停在按钮上时，我们希望按钮的背景色变为红色，文字颜色变为白
html中的hover的作用Feb 20, 2024 am 08:58 AMHTML中的hover的作用及具体代码示例在Web开发中，hover（悬停）是指当用户将光标悬停在一个元素上时，触发一些动作或效果。它是通过CSS的:hover伪类来实现的。在本文中，我们将介绍hover的作用以及具体的代码示例。首先，hover使元素在用户悬停时可以改变其样式。比如，将鼠标悬停在一个按钮上时，可以改变按钮的背景颜色或者文字颜色，以提示用户当
css中hover怎么用Nov 24, 2023 am 10:32 AM在CSS中，:hover是一种伪类选择器，用于选择鼠标指针悬停在上面的元素。当用户将鼠标悬停在元素上时，可以使用:hover来应用一些样式变化。
jQuery hover()方法怎么使用Dec 04, 2023 am 09:56 AMhover()是jQuery中一个常用的方法，它用于绑定两个事件处理函数，这两个函数将在鼠标指针进入和离开匹配的元素时执行。基本的使用方法为“$(selector).hover(inFunction,outFunction);”。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SublimeText3 English version
Recommended: Win version, supports code prompts!
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
WebStorm Mac version
Useful JavaScript development tools
SublimeText3 Linux new version
SublimeText3 Linux latest version
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
