Hi, I'm just getting starting with Bootstrap Studio.
I've got a div, sized 130px wide and 35px high and with a green background colour. It then has a link within it with black text saying, say, "Jobs".
Although I have created a class for the link and specified that it should have the same width and height as the div, when I hover over it you can see that the container is only sized for the text within it. The appearance window shows the width is set to 130px but it's not.
This means that when I add a hover effect to the link, it only changes the background colour of the text to purple, not the whole div.
I can add a hover effect to the div too which changes the whole thing to purple, but I also want the text to change to white at the same time. Since the text colour seems attached to the link, it therefore only changes to white when I hover directly over the link.
This results in me hovering over the green div with black text, the div changes to purple and the text stays black, then when I continue moving over the link itself, the text finally changes to white. It's a bit messy.
What am I doing wrong?!
HTML
<div class="area">
<a href="#">Jobs</a>
</div>
CSS
.area, .link {
margin: 0;
padding: 0;
width: 13rem;
line-height: 3.5rem;
height: 3.5rem;
background-color: #93C65D;
text-align: center;
font-weight: 300;
font-size: 1.8rem;
}
.area:hover, .link:hover {
color: white;
background-color: #8D64AF;
}
Michelle