I'm wanting to have a border bottom transition on my header navigation when the cursor hovers over the links. It was working when I first implemented this, but after adding some more code, I can't get this to work whatsoever.
My CSS looks like this:
a:link,
a:visited {
color: #1c2234;
text-decoration: none;
padding-bottom: 20px;
border-bottom: 3px solid transparent;
-webkit-transition: border-bottom 0.2s, color 0.2s;
transition: border-bottom 0.2s, color 0.2s;
}
a:hover,
a:active {
color: #555;
border-bottom: 3px solid #1c2234;
}
Here's a picture of the header
I know that a common issue with this is not setting the border-bottom prior to hover, but I did that already and set it to transparent. The color changes upon hover, but the border isn't showing up. Any ideas? Thanks!
Just figured this out. I was calling overflow: hidden on my .main-nav class, and that was hiding my border-bottom.
Related
I have this styling:
#bbpress-forums li.bbp-forum-freshness a:hover, #bbpress-forums li.bbp-topic-freshness a:hover {
text-decoration: underline;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
Yet, when I hover over the links:
As you can see they are still showing shadow effects. I have been able to use the aforementioned approach in other classes.
The page:
https://www.publictalksoftware.co.uk/support-forums/
Any advice appreciated. I just want it to be a underline with no shadow.
Try this:
.bbp-forum-title:hover, .bbp-forum-freshness a:hover {
background: transparent!important;
border-top: none!important;
}
Looks like it's a background color, not a box shadow.
Try to add to your class :
background: none;
border: none;
And you dont need to reset box-shadow.
I want to fade in a border on hover. I have the following but it starts off as nothing then goes to a 1px grey line (grey is default color) and then eventually goes to a 2px red line.
What am I going wrong?
a{
border-bottom: none;
transition: border-bottom 1s;
}
a:hover{
border-bottom: 2px solid red;
}
<a href='#'>hover here</a>
When an element has no border, then you add on hover you face a few issues such as page moving, drawing border from scratch etc
Solution: Try setting border to transparent first, so it's there but cannot be seen:
a {
border-bottom: 2px solid transparent; /* <- here */
transition: border-bottom 1s;
text-decoration: none; /* I added this for clarity of effect */
}
a:hover {
border-bottom: 2px solid red;
}
testing border
Edit
Actually, you don't need to declare the whole border again, just change the color:
a:hover {
border-color: red; /* <-- just change the color instead */
}
You need to provide a border by default to the hyperlink, which should be transparent in color. Later on hover, you may modify it's color. Leave the rest on the transition property.
See it yourself.
a {
border-bottom: 2px solid transparent;
transition: border-bottom 1s;
text-decoration: none;
}
a:hover {
border-bottom-color: red;
}
Demo Hyperlink
Cheers!
Why this happens
You get this because of your transition and the initial value of your element. All elements have default values, even when those aren't defined by you. For instance, <div> elements always have display: block per default and <b> elements have font-weight: bold per default.
Similarly, your <a> tag has border-bottom-color: rgb(0, 0, 0). This is true even when the thickness of the border is zero.
In chrome, you can see all of this in the "computed" section of the "Elements" tab:
So when the transition starts, it's going to gradually change the color from black to the red you defined.
How to fix
What you need to do is to override that default values, with your own. This is to prevent it from starting off as black.
a{
border-bottom: 2px solid transparent;
transition: border-bottom 1s;
}
a:hover{
border-bottom: 2px solid red;
}
A tip is to always define the same properties for an element "before" a hover and "during" one. Another thing you should be aware of is that using none as the initial value usually won't give you the behavior you want. Transitions need a numerical value as a start-off point (e.g 0).
im having some troubles with my CSS, i have a button i made and i have given it some CSS to add a color changing effect with webkit transition, the color change works on hover but when mouse is taken off button it wont show effect of it returning to how it was before, heres my css
.button-blue{
border: 1px solid #00B7EF;
border-radius: 5px;
color: #00B7EF !important;
background-color: transparent;
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 0.5s;
webkit-property: background-color, color;
webkit-duration: 0.5s;
}
.button-blue:hover {
border: 1px solid #00B7EF;
border-radius: 5px;
color: white !important;
background-color: #00B7EF;
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 0.5s;
webkit-property: background-color, color;
webkit-duration: 0.5s;
}
You already have transition properties for your href stated previously so just state it once with your href before and remove the transition properties from your button so your css would look like the following:
Working fiddle Fiddle
.navigation-bar ul li a {
color: #333333;
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-size: 19px;
font-weight: 400;
font-style: bold;
padding: 5px 5px 10px 10px;
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 0.5s;
webkit-property: background-color, color;
webkit-duration: 0.5s;
}
.button-blue{
border: 1px solid #00B7EF;
border-radius: 5px;
color: #00B7EF !important;
background-color: transparent;
}
.button-blue:hover {
border: 1px solid #00B7EF;
border-radius: 5px;
color: white !important;
background-color: #00B7EF;
}
webkit-property and webkit-duration aren't CSS properties.
The correct syntax is transition-property and
transition-duration.
-webkit- is only a vendor prefix for CSS features on Google Chrome
and newer versions of Opera.
In pseudoclasses as :hover state, you only have to declare
properties that you will change, isn't necessary repeat already
declared ones. So, border-radius is out (unless you
want to change it).
You have to set the transition in the default state. If you declare
again on :hover state, you are creating a second instance for the
transition, that's why you got this animation on your button.
You already have declared a transition in .navigation-bar ul li a (And have a transition only for color, not background).
So, now you have a problem with specificity, because targeting a parent class and then directly targeting to an HTML
element in CSS has more priority than targeting only a class
(You can check it here).
If all of your a element in your .navigation-bar will have
the same transition, you can set it here. (Not ideal, but it works
cleaner and will be less changes.)
You also need to add a transition for background. This doesn't alter
the rest of your links, because if you don't set a background in
hover (or focus) state, it will not change.
And obviously, you have to remove the transition from
.button-blue, because you will not use it anymore (It would be
repetitive).
Try to modularise more your CSS (don't repeat yourself). You
can learn more searching for BEM, OOCSS or SMACSS
(It's a matter of taste)
I would like to make div css background hover effect on my very top menu to white(#fff).
It's not a menu link. It's background(rectangular a little bit transparency table. A full width).
If you use F12, you can see 'div.top-strip.color-site-white'.
My site is http://www.samgyoyu.com/. And I would like to make hover effect like this site. http://www.herschelsupply.com/.
Thank you and have a nice day:)
add following line to your css
#secondary-nav ul li:nth-child(n+2) a:hover
{
color: black;
border-bottom: 2px solid black;
}
Make the background color as transparent
#masthead .color-site-white {
background-color:rgba(255,255,255,.5);
position:fixed;
left: 0;
right: 0;
}
#masthead .color-site-white:hover {
background-color:rgba(255,255,255,1);
}
For IE 7, 8 - This will not support (RGBA) so you must use a png transprent image for background and div:hover also not support for IE so u must use javascript for that.
$("#masthead .color-site-white").hover(function(){
$(this).css({background:'white'});
})
add these lines to your div
.top-strip color-site-white {
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-ms-transition: 0.2s;
transition: 0.2s;
}
.top-strip color-site-white:hover {
background-color: #whatever...
}
The CSS code:
.css3_nudge ul li a {
-webkit-transition-property: color, background-color, padding-left, border-right;
-webkit-transition-duration: 400ms, 400ms, 400ms, 400ms;
}
.css3_nudge ul li a:hover {
background-color: #efefef;
color: #333;
padding-left: 50px;
border-right: 1px solid red;
}
The HTML code:
<div class="css3_nudge nudge">
<ul>
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Register</li>
<li>Contact</li>
</ul>
</div>
The transition is working fine for all elements but border, it just appears at the end of 400ms, there is no effect on border.
What I'm trying to achieve is a effect like the new google gmail buttons.
Thanks in advance for any help
This is a pretty simple fix. You just need a border to already exist before the hover effect. So just set the border-right: 1px solid #fff; like below:
.css3_nudge ul li a {
-webkit-transition-property: color, background-color, padding-left, border-right;
-webkit-transition-duration: 400ms, 400ms, 400ms, 400ms;
border-right: 1px solid #fff; /* added property */
}
Then the transition is effectively just changing the colour of the border instead of creating a border.