How to display child elements during mouse hover by css
Today, I would like to share with you how to achieve css mouse hover to display sub-elements of the relevant knowledge, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's take a look at it.
Css Basics-Box Model + background and list
The value of border-style:
None none
Dotted dot
Dashed dotted line
Solid solid line
Double double solid line
Margin:
If the outer margins are set for the two adjacent elements in the vertical direction, the outer margins will be merged.
Merge height = the larger of the two outer margins that are merged
The actual height of the element = upper border + upper inner margin + content height + lower inner margin + lower border
The actual height of the element in the page is: upper outer margin + upper border + upper inner margin + content height + lower inner margin + lower border + lower outer margin
The hover attribute enables the display of child elements when hovering over the mouse:
Display attribute div {width: 200px;} / * Supplementary style * / ul {margin-left:-36px;} li {display: none;} div:hover li {display: inline-block; list-style: none;} Home Appliances refrigerator Air-conditioned washing Machine
Inline displays the element as an inline element without a newline character before and after the element
The width and height of inline elements cannot be set, and the outer margin can only be set to the left and right, not up and down.
List demo:
Display attribute * {margin:0;padding:0;} .wrap {width: 220px; background-color:#f2f4f6; border:1px solid # ececec; margin:0 auto;} .list {width:100%; height:150px; background-color:#040a10; text-align:center; color:#fff; line-height:150px Font-size:20px; font-weight:bold;} li {list-style: none; border-bottom:1px solid # d9dde1; font-size:14px; line-height:1.5em; margin:0 15px; padding:10px 5px 5px 5px;} li:last-child {border-bottom:none;}
Front-end course arrangement
HTML+CSS basic course
456605 people are studying.
HTML+CSS basic course
456605 people are studying.
HTML+CSS basic course
456605 people are studying.
Mouse over to display demo:
Display attribute * {margin:0;padding:0;} .big {width: 150pxleft margin: 10px auto 0 auto;background: # f2f4f6 borderline: 1px solid # ddd;} h4 {height: 40pxpolitical ddd; height: 40pxpolitical textalign: center;} .div1h4 {border-bottom: 1px solid # ddd;} .div2h4 {border-bottom: 1px solid # ddd;} ul {background-color:#fff Display: none;} ul li {height: 30pxTracheet ddd; height: 30pxTracheet left: 58pxtransListure style: none;} .div1: hover .elec {display: block;border-bottom: 1px solid # ddd;} .div2: hover .pictures {display: block;border-bottom: 1px solid # ddd;} .div3: hover .clothes {display: block;border-top: 1px solid # ddd Household appliances, refrigerators, washing machines, air conditioners, detergents, disinfectants, softness Clothes, shirts, trousers, sweaters.
Background-color:transparent transparent, which is the default
Background area includes content + inner margin + border, excluding outer margin
Background-repeat:repeat 、 no-repeat 、 repeat-x 、 repeat-y 、 inherit
Background-attachment:scroll (default) / fixed
Background-position:
Value (x y) (x% y%) (only one parameter represents the second default center) / top/bottom/left/right/center (horizontal vertical center)
Background abbreviation: the following attribute values are in no order
Ordered list style:
List-style-position:inside (embedded in text) / outside (on the left side of all text)
Demo li {list-style-image:url (http://climg.mukewang.com/58dc9e4e0001ba9000160016.png);} TV refrigerator washing machine air conditioning is all the content of this article "how to display sub-elements when css hovers over the mouse". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
