How can I make a bottom border appear when I hover over a div?
Question
I have some divs that I'm using as navigation buttons. I want a thin black line to appear on the bottom when I hover over them. I tried using border-bottom and it didn't work, but strangely bottom-top and border-right did work. Why?
#box-a { background: red; grid-area: a; } #box-b { background: blue; grid-area: b; } #box-c { background: green; grid-area: c; }.main { display: grid; grid-template-areas: "aa" "bc"; grid-template-rows: 40px auto; grid-template-columns: 1fr 4fr; }.header-button { background: red; height: 50px; width: 80px; color: white; display: inline-block; text-align: center; padding: 10px; }.header-button:hover { color: yellow; border-bottom: 3px solid black; }
<body> <div class="main"> <div id=box-a> <div class=header-button>About</div> <div class=header-button>How to</div> <div class=header-button>Info</div> <div class=header-button>More</div> </div> <div id=box-b> <p> This is the content of box B. </p> </div> <div id=box-c> <p> This is the content of box C. </p> </div> </div> </body>
1 answers
solution1
0 ACCPTED 2021-06-03 22:33:07
Okay, you have two issues:
Your height is specified in the child of your row and its children are showing up underneath the next sibling element. If you inspect the elements and highlight them in code inspector it will show you the overflow going on there. So we remove the height on header button and let the 40px you have handle height in the
grid-template-rowsproperty of your grid parent.Your bottom-border is showing up underneath the
box-bandbox-celements, set therez-index: -1and the nav buttons will show up on top.
#box-a { background: red; grid-area: a; } #box-b { background: blue; grid-area: b; z-index: -1; } #box-c { background: green; grid-area: c; z-index: -1; }.main { display: grid; grid-template-areas: "aa" "bc"; grid-template-rows: 40px auto; grid-template-columns: 1fr 4fr; }.header-button { background: red; width: 80px; color: white; display: inline-block; text-align: center; padding: 10px; }.header-button:hover { color: yellow; border-bottom: 3px solid black; }
<body> <div class="main"> <div id=box-a> <div class=header-button>About</div> <div class=header-button>How to</div> <div class=header-button>Info</div> <div class=header-button>More</div> </div> <div id=box-b> <p> This is the content of box B. </p> </div> <div id=box-c> <p> This is the content of box C. </p> </div> </div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.