Jump to content

Hover Border


Spunky
 Share

Recommended Posts

Ok so here's the thing. I need to be able to hover over a text link and have a border appear without the text slightly moving. What I tried doing is using CSS for the a:hover attribute. I tell what border style and color to be as well as add a padding so that the border is hugging the text too much. Thing is though when I hover over it the border goes on like it should but the text shifts position. How do I stop this?

Link to comment
Share on other sites

The link in a non-hover state can have border-color:transparentThat way, the border is always there, so the size never changes.
Ok so when I read this I thought to myself omg why didn't I think of that? But then I went and tried it and it did not work. So, I added a colored border to see what the problem is. The borders in themselves don't even line up. I have the text inside a <span> tag if that helps. So, why is it doing this? The CSS applied to both the <span> tag for the text and the a:hover attribute is:
border-style: solid;border-color: #color

So, not sure why even if they did both have a border it doesn't match up..

Link to comment
Share on other sites

remove the css border properties for the span element.try a {border-bottom:1px solid transparent;}a:hover {{border-bottom:1px solid #ff0000;}
Thanks so much! That worked! :)
Link to comment
Share on other sites

Alright I actually have another question about this thing. Is it possible to get it so the borders are all the same size instead of fitting around the word? For example, "Home" is a shorter word than "Products" and so the border placed around them are 2 different sizes. I tried adding a width to the "a" attribute and the "a:hover" attribute but it didn't effect anything.

Link to comment
Share on other sites

Width would work if you were working with block elements, but <a> elements are displayed as inline by defaut. Try adding display: block; to the <a> element. You might have to change a few other things after that, though, since block elements behave differently than inline elements.

Link to comment
Share on other sites

Width would work if you were working with block elements, but <a> elements are displayed as inline by defaut. Try adding display: block; to the <a> element. You might have to change a few other things after that, though, since block elements behave differently than inline elements.
Thank you. That actually worked. I did not even think about the fact that the element was inline vs block. The only problem is is that the text is no longer centered within the div tag. For my instance that's fine because I have the border almost the same width as the div so it looks how I want it to anyways, but, for learning purposes is there something else that could be changed to center the text? Like, the text is centered inside the border, but as a whole, being inside the div tag it is no longer centered.Thank you for your help though. :)
Link to comment
Share on other sites

To center a block element within its parent, use margin: auto;. To center text within a block element, use text-align: center;
OH I get it! Yea, like to center a div you do margin: 0 auto 0 auto; yea yea I didnt even think of that since now it is a block element, haha! :) Thank you!
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...