Hover last child css

Содержание

CSS Make last child visible when hover
CSS Style
HTML Body
Related
CSS hover: last type of child display:none; display:block;
1 Answer 1

CSS Make last child visible when hover

The following tutorial shows you how to use CSS to do «CSS Make last child visible when hover».

CSS Style

The CSS style to do «CSS Make last child visible when hover» is

nav !-- w w w . d e m o 2 s . co m --> width:100%; height:50px; position:fixed; top:0px; background-color:#2A2A2A; z-index:100; > #fondo < width:3000px; height:50px; position:absolute; top:0px; background-color:#2A2A2A; z-index:-95; margin-left:-30px; > nav ul < margin-left:16%; margin-top:0px; background:#2A2A2A; min-width:2000px; > ul.menu li < position:relative; width:200px; float:left; background:#2A2A2A; padding:0; -webkit-transition:all 0.5s; transition:all 0.5s; list-style-type:none; text-align:center; > nav li:hover < background-color:#1473F0; > ul.menu li a < display:block; height:35px; width:200px; text-decoration:none; color:white; padding-top:15px; padding-left:0; border-left:solid 1px #474747; -webkit-transition:All 0.5s ease-in-out; transition:All 0.5s ease-in-out; > ul.sub-menu < padding:15px; position:absolute; top:-200px; left:-780px; width:3045px; height:100px; z-index:-100; opacity:0; visibility:hidden; background:#1473F0; -webkit-transition:All 0.5s ease-in-out; transition:All 0.5s ease-in-out; border-left:solid 0.2em #474747; > ul.sub-menu a < margin-left:750px; margin-top:5px; -webkit-transition:All 0.4s ease-in-out; transition:All 0.4s ease-in-out; width:70px; > ul.sub-menu li < float:none; height:40px; background:none; > ul.sub-menu li a < height:30px; width:100px; border-left:none; border-right:solid 1px #242424; > ul.sub-menu li a:hover < color:#2C2C2C; > ul.menu li:hover>.sub-menu < opacity:1; visibility:visible; display:block; -webkit-transform:translateY(250px); transition:translateY(250px); > ul.menu li a:hover < background:#1473F0; > ul.resub-menu < margin-top:30px; position:absolute; top:0; width:200px; height:10px; background:none; opacity:0; visibility:hidden; > ul.resub-menu a < margin-left:420px; margin-top:-15px; text-align:left; font-size:14px; > ul.resub-menu li a < border-right:none; height:10px; > ul.resub-menu li a:hover < background:none; > ul.sub-menu li:hover>.resub-menu < opacity:1; visibility:visible; color:#fff; display:block; >

HTML Body

body> nav> div id="fondo">  ul >"menu"> li>a href="#">menu1  li id="menu2">a href="#">menu2 ul >"sub-menu"> li>a href="#">sub1 ul >"resub-menu"> li>a href="#">resub  li>a href="#">resub  li>a href="#">resub    li>a href="#">sub2 ul >"resub-menu"> li>a href="#">resub2  li>a href="#">resub2  li>a href="#">resub2      li>a href="#">menu3  li>a href="#">menu4   !-- w w w . d e m o 2 s . c o m -->

The following iframe shows the result. You can view the full source code and open it in another tab.

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> nav !-- w w w . d e m o 2 s . c o m --> width:100%; height:50px; position: fixed; top: 0px; background-color: #2A2A2A; z-index:100; > #fondo < width:3000px; height:50px; position: absolute; top: 0px; background-color: #2A2A2A; z-index:-95; margin-left:-30px; > nav ul < margin-left: 16%; margin-top:0px; background: #2A2A2A; min-width:2000px; > ul.menu li < position: relative; width:200px; float: left; background: #2A2A2A; padding: 0; -webkit-transition: all 0.5s; transition: all 0.5s; list-style-type: none; text-align:center; > nav li:hover < background-color:#1473F0; > ul.menu li a < display:block; height:35px; width:200px; text-decoration: none; color: white; padding-top:15px; padding-left:0; border-left: solid 1px #474747; -webkit-transition: All 0.5s ease-in-out; transition: All 0.5s ease-in-out; > ul.sub-menu < padding: 15px; position: absolute; top: -200px; left: -780px; width: 3045px; height:100px; z-index:-100; opacity: 0; visibility: hidden; background:#1473F0; -webkit-transition: All 0.5s ease-in-out; transition: All 0.5s ease-in-out; border-left: solid 0.2em #474747; > ul.sub-menu a < margin-left:750px; margin-top:5px; -webkit-transition: All 0.4s ease-in-out; transition: All 0.4s ease-in-out; width: 70px; > ul.sub-menu li < float:none; height:40px; background:none; > ul.sub-menu li a < height:30px; width:100px; border-left: none; border-right:solid 1px #242424; > ul.sub-menu li a:hover < color: #2C2C2C; > ul.menu li:hover > .sub-menu < opacity: 1; visibility: visible; display: block; -webkit-transform: translateY(250px); transition: translateY(250px); > ul.menu li a:hover < background: #1473F0; > ul.resub-menu < margin-top:30px; position: absolute; top: 0; width: 200px; height:10px; background:none; opacity: 0; visibility: hidden; > ul.resub-menu a < margin-left:420px; margin-top:-15px; text-align:left; font-size:14px; > ul.resub-menu li a < border-right: none; height:10px; > ul.resub-menu li a:hover < background: none; > ul.sub-menu li:hover > .resub-menu < opacity: 1; visibility: visible; color: #fff; display: block; >  body> nav> div id="fondo">  ul >"menu"> li>a href="#">menu1  li id="menu2">a href="#">menu2 ul >"sub-menu"> li>a href="#">sub1 ul >"resub-menu"> li>a href="#">resub  li>a href="#">resub  li>a href="#">resub    li>a href="#">sub2 ul >"resub-menu"> li>a href="#">resub2  li>a href="#">resub2  li>a href="#">resub2      li>a href="#">menu3  li>a href="#">menu4

CSS Make green tab appear on hover div with pure css
CSS make hover for all elements inside tr
CSS Make input type range thumb appear visible on hover
CSS Make last child visible when hover
CSS Make multiple hover and click scalable
CSS Make multiple hover and click scalable (Demo 2)
CSS Make multiple hover and click scalable (Demo 3)

Источник

CSS hover: last type of child display:none; display:block;

Hello guys i’m strugling with an hover element i build a #nav bar with few elements inside the last element (Logout) contains 2 pictures i try to change the picture after mouse(hover) over how can i manage it. HTML


  Stuff1
  Stuff2
  Stuff3
  Logout

#nav ul img < vertical-align: middle; padding-left: 5px; >#nav < max-width: 100%; border: 2px solid white; color: green; background-color: grey; border-radius: 10px 10px 10px 10px; >#nav_wrapper < margin:0 auto; text-align: center; >#nav ul < border-radius: 10px 10px 10px 10px; position: relative; list-style-type: none; margin:0; padding:0; >#nav li < border-radius: 10px 10px 10px 10px; display: inline-block; >#nav ul li:hover < background-color: #333; >#nav ul li a,visited < color: #ccc; display: block; padding: 15px; text-decoration: none; >#off

1 Answer 1

/* default state */ ul li:last-child img < display: block; >ul li:last-child img + img < display: none; >/* switch images display on :hover */ ul li:last-child:hover img < display: none; >ul li:last-child:hover img + img

Note: since in your example there are images only on a single list-item, you can simplify the rules, omitting both ul and :last-child so as to decrease their specificity and make the example working even on IE8 ( :last-child doesn’t work in that browser)