Keshav Vasudevan Keshav Vasudevan - 2 months ago 7
CSS Question

Color child elements with border height on hover

I have a parent div with 2 anchor child elements. The parent div has a border, and on hover, I wish to highlight the child anchor tags. Now, I can do this, but the hover doesn't fill up the entire width and height of the border that surrounds the parent div.

HTML:

<div class= 'about-header-container header-info' id='about-header'>
<a class='bio-header tablink' href='#bio-dashfolio'>Bio</a>
<a class='timeline-header tablink' href='#timeline-dashfolio'> Timeline</a>
</div>


CSS:

.header-info {
max-width:250px;
padding:10px;
text-align:center;
font-size: 0px;
margin-top: 10px;
font-size: 15px;
border-radius: 5px;
}

.about-header-container {
width: 240px;
border:10px solid #027878;

}

.about-header-container>a:hover {

background-color: #027878;
color: white;
opacity: 0.7;
}


Here's the fiddle: https://jsfiddle.net/kesh92/3cnxef4h/

On hovering over Bio and Timeline, I want it to highlight to the color
#027878
while filling up the appropriate section inside the border without leaving any white spaces between the border and the anchor elements. Thanks in advance!

Update
This is the desired hover effect -

Before hover
List item

When hovering over Bio
enter image description here

Answer

Edit: Didn't realised you wanted to fill both the height and width. This one will do the trick:

.tablink {
  display: inline-block;
  width: 45%;
  padding: 5px;
  text-align: center;
}

On your .header-info change padding: 5px; to padding: 0 5px;

Working fiddle here: https://jsfiddle.net/cba0cn7n/1/

And use the code below to fill the height only

display: inline-block;
padding: 5px 0;

to your .tablink

What is being done here is removing the padding-top and bottom from .header-info and adding it to the .tablink.