has been using the jquery hover () function to write the mouse through the event, these days found that other peers directly using CSS is done. I tried it under the line:
Of course, there is no precondition, it needs to be used with some positional attributes (Position/top/left). The code is as follows:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Title</title> <Linkrel= "stylesheet"href= "Css/bootstrap.css" /> <style>. Outer{position:relative;width:150px; }. Link{padding:0 18px;Height:50px;Display:Block;Z-index:2;background:#373d41;Border-right:1px solid #2a2f32;Color:#fff;font-size:14px;Line-height:50px;text-decoration:None; }. Link:hover{background:#373d41}. Appear-hide{position:Absolute;Top:50px; Left:0;background:#ccc;Color:#000;Opacity:0;Visibility:Hidden; }. Outer:hover. Appear-hide{Opacity:1;Visibility:Visible; }. Test{Margin-top:20px} </style></Head><Body> <Divclass= "outer"> <aclass= "link"href= "javascript:;">Click Show or hide</a> <Divclass= "Appear-hide"> <P>CSS, CSS3</P> <P>HTML, HTML5</P> <P>JavaScript, ES6</P> <P>HTTP protocol</P> <P>Performance optimization</P> <P>A back-end language</P> <P>Better way to write code</P> <P>Offline development and code publishing</P> </Div> </Div> <Divclass= "Test"> <P>CSS, CSS3</P> <P>HTML, HTML5</P> <P>JavaScript, ES6</P> <P>HTTP protocol</P> <P>Performance optimization</P> <P>A back-end language</P> <P>Better way to write code</P> <P>Offline development and code publishing</P> </Div></Body></HTML>
View Code
- As for why you should work with positional properties, you can first understand the visibility property: Visibility Property _w3cschool
- Another property Opacity:opacity property _w3cschool, for the W3cschool on a place did not see, add the CSS after testing, found that. Test's child element P does not continue its Opacity property value.
A place that is not clear:
Add the CSS code:
. test { margin-top:20px; opacity:0.5; }
The child element p does not continue with its Opacity property value:
Summary: Of course, this is just a simple mouse through the display of events, more complex or need to use jquery and other to write.
Using CSS properties to visibility and opacity in place of mouse-over jquery events