Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.