Why sometimes there is no response when using the hover attribute in CSS? (example)-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Why sometimes there is no response when using the hover attribute in CSS? (example)

藏色散人

Aug 10, 2018 pm 05:24 PM

When we use hover in CSS, we occasionally encounter invalid situations, which is really worrying. So what exactly caused the failure? This article will summarize the reasons why hover fails in CSS.

The specific code examples for the usage of hover in css are as follows:

<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="css中hover的用法测试">css中hover的用法测试</h1>
<div class="one">
	<div class="two">
	</div>
	<div class="three">	
	</div>
	<div class="four">	
	</div>
</div>
</body>

Summary of invalid reasons:

1. When testing the above code, it was found that the mouse passed the class The background remains unchanged when one is in one, but the background color of other divs in one changes. This shows that adding a space before :hover will not have the effect of :hover, but the descendant elements will have the effect of :hover.

2. Only descendant elements and sibling elements (sibling elements immediately after the element) have an effect. Others:hover will be invalid

3. The class name is wrong;

4. :hover is also invalid if it is placed before :link and :visited;

Note:

:hover selector is used to select the element on which the mouse pointer is floating.

Tip: The :hover selector can be used on all elements, not just links.

Tip: The :link selector sets the style of links pointing to pages that have not been visited, the :visited selector is used to set links to pages that have been visited, and the :active selector is used for active links. In the CSS definition, :hover must come after :link and :visited (if present) for the style to take effect.

The above is the detailed content of Why sometimes there is no response when using the hover attribute in CSS? (example). For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

So Many Color LinksApr 13, 2025 am 11:36 AM

There's been a run of tools, articles, and resources about color lately. Please allow me to close a few tabs by rounding them up here for your enjoyment.

How Auto Margins Work in FlexboxApr 13, 2025 am 11:35 AM

Robin has covered this before, but I've heard some confusion about it in the past few weeks and saw another person take a stab at explaining it, and I wanted

Moving Rainbow UnderlinesApr 13, 2025 am 11:27 AM

I absolutely love the design of the Sandwich site. Among many beautiful features are these headlines with rainbow underlines that move as you scroll. It's not

New Year, New Job? Let's Make a Grid-Powered Resume!Apr 13, 2025 am 11:26 AM

Many popular resume designs are making the most of the available page space by laying sections out in a grid shape. Let’s use CSS Grid to create a layout that

One Way to Break Users Out of the Habit of Reloading Too MuchApr 13, 2025 am 11:25 AM

Page reloads are a thing. Sometimes we refresh a page when we think it’s unresponsive, or believe that new content is available. Sometimes we’re just mad at

Domain-Driven Design With ReactApr 13, 2025 am 11:22 AM

There is very little guidance on how to organize front-end applications in the world of React. (Just move files around until it “feels right,” lol). The truth

Detecting Inactive UsersApr 13, 2025 am 11:08 AM

Most of the time you don’t really care about whether a user is actively engaged or temporarily inactive on your application. Inactive, meaning, perhaps they

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufoo has always been great with integrations. They have integrations with specific apps, like Campaign Monitor, Mailchimp, and Typekit, but they also

See all articles