Hi, fellows: good afternoon, I want to do a browser suspension box on the left (written announcement and contents), I want receive suspension box to realize, because there is no learning javascript, may pure CSS implementation, please, if can not have men can leave code would be nice, crab crab than heart

CodePudding user response:

the more the better

CodePudding user response:

Pure CSS can be achieved, if it is to be hovering in direct use of CSS: hover pseudo class can,
If it is to the mouse to click on some trouble, and need to use a hidden & lt; Input type="checkbox"/& gt; And the corresponding & lt; Label> Combined with CSS: checked pseudo class to do, it is better to use js convenient,

CodePudding user response:

https://blog.csdn.net/jvhbi/article/details/107003691
My blog, CSS, and introduces the use of CSS, to write switch tabs, or a round figure

CodePudding user response:

 
The left - float {
width: 100px; 
height: 200px; 
position: fixed; 
left: 0; 
Top: calc (50 vh - 100 px); 
Background - color: white. 
0.5 s help ease the transition: all; 
} 

The left - float: hover {
width: 300px; 
} 

If only the mouse slip, CSS can be achieved, but if it is, click the button to use JS to change properties

CodePudding user response:

 
. Notice - box {
width: 200px; 
Height: 300 px; 
Box - shadow: 0 1 px 4 px rgba (0, 0, 0, 2); 
position: fixed; 
top: 50%; 
Left: - 200 px; 
The transform: translateY (50%); 
The transition: left. 5 s; 
} 
. Notice - box. Notice the title - {
Width: 20 px; 
text-align: center; 
Padding: 6 0 px; 
position: absolute; 
Right: - 20 px; 
top: 50%; 
The transform: translateY (50%); 
Background - color: # 004974; 
color: #fff; 
cursor: pointer; 
} 
Notice - box: hover {
left: 0; 
} 

 
 I am a notice & lt;/p> 
 
 
 

CodePudding user response:

How to set the default is on

CodePudding user response:

reference 5 floor ZionHH reply:

 
. Notice - box {
width: 200px; 
Height: 300 px; 
Box - shadow: 0 1 px 4 px rgba (0, 0, 0, 2); 
position: fixed; 
top: 50%; 
Left: - 200 px; 
The transform: translateY (50%); 
The transition: left. 5 s; 
} 
. Notice - box. Notice the title - {
Width: 20 px; 
text-align: center; 
Padding: 6 0 px; 
position: absolute; 
Right: - 20 px; 
top: 50%; 
The transform: translateY (50%); 
Background - color: # 004974; 
color: #fff; 
cursor: pointer; 
} 
Notice - box: hover {
left: 0; 
} 

 
 I am a notice & lt;/p> 
 
 
 

is on by default

CodePudding user response:

refer to 7th floor wowjp response:

Quote: refer to the fifth floor ZionHH reply:

 
. Notice - box {
width: 200px; 
Height: 300 px; 
Box - shadow: 0 1 px 4 px rgba (0, 0, 0, 2); 
position: fixed; 
top: 50%; 
Left: - 200 px; 
The transform: translateY (50%); 
The transition: left. 5 s; 
} 
. Notice - box. Notice the title - {
Width: 20 px; 
text-align: center; 
Padding: 6 0 px; 
position: absolute; 
Right: - 20 px; 
top: 50%; 
The transform: translateY (50%); 
Background - color: # 004974; 
color: #fff; 
cursor: pointer; 
} 
Notice - box: hover {
left: 0; 
} 

 
 I am a notice & lt;/p> 
 
 
 

how is on by default

Open by default, had better use js wrote