html - How do you border-bottom:none; the previous menus? -
so i've created menu using flex. using bottom borders when menu isn't hovered indicate items user can select when hover mouse on menu.
when user hovers on menu want erase bottom borders on other menus user hasn't hovered mouse at.
my code can erase bottom borders of menus after hovered menu.
problem: code can't erase bottom borders of menus before hovered menu.
jsfiddle link: http://jsfiddle.net/hiroga/publdtxh/
css:
/* colorcombo ref:http://www.colorcombos.com/color-schemes/107/colorcombo107.html #6699cc #003366 #c0c0c0 #000044 */ body { background-color:#000044; font-family:'trebuchet ms', 'lucida sans unicode', 'lucida grande', 'lucida sans', arial, sans-serif; font-size:14px; } /*navigation*/ nav { display:flex; width:auto; height:auto; justify-content:center; align-content:center; background-color:#c0c0c0; border-radius:5px; box-shadow:5px 5px 5px; } nav > div { margin:5px; cursor:pointer; border-radius:5px; } .menu{ border-bottom:3px solid black; } .menu > div { display:none; } .menu:hover{ border-bottom:none; } .menu:hover ~.menu{ border-bottom:none; } .menu:hover > div{ display:flex; margin-top:3px; background-color:#c0c0c0; border-radius:5px; justify-content:center; align-content:center; } .menu:hover > div:first-child { border-top:3px solid black; } .menu:hover > div:last-child { border-bottom:3px solid black; } html:
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>sample modern</title> <link href="styles.css" rel="stylesheet" /> <script src="jquery-2.1.1.min.js"></script> </head> <body> <nav> <div> home </div> <div class="menu"> menu <div> item </div> <div> item </div> <div> item </div> </div> <div class="menu"> menu 2 <div> item 2 </div> <div> item 2 </div> <div> item 2 </div> </div> <div class="menu"> menu 3 <div> item 3 </div> <div> item 3 </div> <div> item 3 </div> </div> </nav> </body> </html>
doing pure css seems impossible, atleast until css4 parent selector arrives. untill javascript there rescue. if css solution, still not hide previous element border,but create border not expand solution below
i have created fiddle inputs have given. view fiddle here
added<span> tag each menu item added border-bottom .menu span added css remove border-bottom of <span> element on hover
css add-on :
.menu span{ border-bottom:3px solid black; } .menu:hover >span{ border-bottom:none; } hope helps
html css css3
No comments:
Post a Comment