The use of a tag question-CodePudding

When to add a label hover, hovering does not display the hover in the style, only after click display hover in style, and TAB of the hover effect can switch, can switch style didn't use to js, I want to know what is this principle,

CodePudding user response:

Click on add a label of the parent after a active, remove brothers node active style at the same time,

Xxxx

After click

Xxxx

The function change (el) {
El. The className='active
//empty peer actvie style
}
CSS
Li. Active a {
color: red;
}

CodePudding user response:

reference 1st floor jio's reply:

click on add a label of the parent after a active, remove brothers node active style at the same time,

Xxxx

After click
Xxxx

The function change (el) {
El. The className='active
//empty peer actvie style
}
CSS
Li. Active a {
color: red;
}

Thanks for your reply, the pictures show above is to add a label hover through CSS implementation of switching effect, did not use to js, my question is after the style hover is usually is hovering is displayed, but after I here to add a label hover the mouse hover does not display style, after click to display the hover style, and can reach switching effect like js,

CodePudding user response:

CodePudding user response:

Hover the failure might be because pseudo-classes priority issues

CodePudding user response:

HTML + CSS can do many things, including cool shuffling figure is ok
Principle is the label label control a radio button, and then use the input: checked +. Box3 attribute selectors + brothers selector to control style
Write a simple table column switching, code is as follows:

<meta charset="utf-8" & gt;
<meta name="viewport" content="width=device - width, initial - scale=1.0" & gt;
Document
<style>
The box {
Width: 400 px;
Height: 100 px;
Border: 1 px solid blue;
Margin: 100 px auto 0;
}

The box2 {
Width: 400 px;
Height: 300 px;
Border: 1 px solid blue;
margin: 0 auto;
}

. Box1 {
Width: 20%;
float: left;
height: 100%;
box-sizing: border-box;
Border: 1 px solid pink;
}

. Box3 {
display: none;
width: 100%;
height: 100%;
}

Input {
display: none;
}

Input: checked +. Box3 {
display: block;
Background - color: aqua;
}
</style>

<body>

CodePudding user response:

May be a: hover in the priority problem, I this is

<meta charset="utf-8" & gt;
<meta name="viewport" content="width=device - width, initial - scale=1.0" & gt;
Document
<style>
The nav {
Height: 41 px;
Border - top: 3 px solid # ff8500;
Border - bottom: 1 px solid # edeef0;
Background - color: # FCFCFC;
The line - height: 41 px;
}

The nav a {
display: inline-block;
Vertical alignment/* */
vertical-align: top;
Height: 41 px;
Padding: 0 px; 20
font-size: 12px;
Color: # 4 c4c4c;
text-decoration: none;
}

The nav a: hover {
Color: orangered;
Background - color: slategrey;

}
</style>

<body>

Page link：https//www.codepudding.com/frontend/94160.html

Prev:Js clipboard operation

Next:Why this code output only a?

Tags：

HTML (CSS)

Links：
CodePudding