I'm trying to fade in border-bottom and I can't quite seem to get it to work. Here's what I've tried:
#navBar a:hover {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
border-bottom: 1px solid #fff;
}
It just keeps appearing with no transition. What am I doing wrong?
The problem is that you are trying to transition by adding a border, which does not work. You can, however, have the color of the border transition from transparent to #FFF:
HTML:
<div id="navBar">
<a>Link</a>
</div>
CSS:
#navBar a {
border-bottom: 1px solid transparent;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
#navBar a:hover {
border-bottom: 1px solid #FFF;
}
Fiddle: Fiddle
If you want to go from no border to white you should still write default attribute because transition won't do this for you.
http://jsfiddle.net/ZmUAw/3/
#navBar a {
text-decoration: none;
border-bottom: 1px solid transparent;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
And after that you can change it to white with transition
#navBar a:hover {
border-bottom: 1px solid #000;
}
Related
I have a button which has some text and a font awesome icon that rotates 90 degrees in 0.5s and changes color when hovered. What I'm trying to accomplish is when the user unhovers the button it should take 0.5s to rotate from 90 degrees back to 0 degrees instead of immediately. I would like a smooth transition back to the original state instead of instant on unhover.
Codepen
Click Me <i class='fas fa-arrow-right' ></i>
.my-button {
text-decoration: none;
color: black;
padding: .2rem;
border: 2px solid black;
transition: all 0.5s ease-in;
&:hover {
background-color: blue;
color: white;
border: 2px solid red;
}
&:hover .fas.fa-arrow-right {
transform: rotate(90deg);
transition: transform 0.5s ease 0s;
}
}
you didn't specify the target i:
try this
.my-button {
text-decoration: none;
color: black;
padding: .2rem;
border: 2px solid black;
transition: all 0.5s ease-in-out;
& i{
transition: all 0.5s ease-in-out;
}
&:hover {
background-color: blue;
color: white;
border: 2px solid red;
}
&:hover .fas.fa-arrow-right {
transform: rotate(90deg);
}
}
I am struggling to remove the line from my vertical menu of my website http://propertypricesearch.com/ (there is a vertical line)
I tried to inspect element and it seems to be .vertical_area_background class
.vertical_area_background{
position: fixed;
width: 290px;
height: 100%;
background-position: right top;
background-repeat: no-repeat;
background-size: cover;
border-right-width: 0px !important;
top: 0px;
left: 0px;
right: 0px;
border-style: none;
z-index: 0;
-webkit-transition: opacity 0.5s ease, background-color 0.5s ease;
-moz-transition: opacity 0.5s ease, background-color 0.5s ease;
-o-transition: opacity 0.5s ease, background-color 0.5s ease;
-ms-transition: opacity 0.5s ease, background-color 0.5s ease;
transition: opacity 0.5s ease, background-color 0.5s ease;
opacity: 1;
background-color: #1d2022;
}
There i put lines like
right: 0px;
border-right-width: 0px !important;
but still its showing the line
Inspected with Chrome and found the rule causing the line. Override it like this:
body.vertical_menu_background_opacity_over_slider_on .vertical_menu_area {
border-right: 0 !important;
}
Alternatively, you can also put a border: none or border-right: none on that particular div holder, instead using the !important
<aside class="vertical_menu_area with_scroll " tabindex="5000" style="overflow-y: hidden; outline: none; border-right: none;">
Problem
You have a border on this element,
body.vertical_menu_background_opacity_over_slider_on .vertical_menu_area
Solutions
Change this,
body.vertical_menu_background_opacity_over_slider_on .vertical_menu_area {
border-right: 1px solid rgba(255,255,255,0.5);
}
1.
body.vertical_menu_background_opacity_over_slider_on .vertical_menu_area {
border-right: 1px solid rgba(255,255,255,0.5);
border-right: none !important;
}
2.
body.vertical_menu_background_opacity_over_slider_on .vertical_menu_area {
border-right: 1px solid rgba(255,255,255,0.5);
border-right: 0 !important;
}
3.
body.vertical_menu_background_opacity_over_slider_on .vertical_menu_area {
border-right: 1px solid rgba(255,255,255,0.5);
}
Basically each one of those options is either removing the rule or overriding it with !important
If you have access I would just delete the rule. If you must override it then I would add a new rule to my css that looked like this,
body.vertical_menu_background_opacity_over_slider_on .vertical_menu_area {
border-right: none !important;
}
The difference between using border-right: 0; and border-right: none;
border: none; However, the line-style value of none will cause
the color and width values to be ignored as stated in the CSS
Specification: 'none' No border. Color and width are ignored (i.e.,
the border has width 0
I want to target properties of two divs through css when :hover over one div.
#down-icn {
position: absolute;
bottom: 0; right: 25px;
color: #fff;
-webkit-transition: color 0.25s ease; border-color 0.5s ease;
-moz-transition: color 0.25s ease; border-color 0.5s ease;
-ms-transition: color 0.25s ease; border-color 0.5s ease;
-o-transition: color 0.25s ease; border-color 0.5s ease;
transition: color 0.25s ease; border-color 0.5s ease;
}
#down-icn:hover {
color: #ef5c30;
border-color: #ef5c30;
}
.icn {
border: 2px solid #fff;
border-radius: 50%;
padding: 10px;
margin-left: 10px;
}
!!! .icn:hover {
border: 2px solid #000;
color: #000;
}
when hovered on #down-icn I want to change the properties of both #down-icn and .icn.
EDIT - html
<a href="#footer-anchor">
<div id="down-icn" data-0="opacity: 1; bottom: 25px;" data-550="opacity: 0; bottom: 100px;">more<i class="icn fa fa-chevron-down fa-2x"></i></div>
</a>
Why don't you just use your anchor for hover selection?
a:hover > #down-icn{
color: #ef5c30;
border-color: #ef5c30;
}
a:hover > .icn {
border: 2px solid #000;
color: #000;
}
OR
#down-icn:hover{
color: #ef5c30;
border-color: #ef5c30;
}
#down-icn:hover > .icn {
border: 2px solid #000;
color: #000;
}
DEMO
As you can see in my jsbin the background overlays the text in my three link objects (move your cursor above it to see it).
I have tried around with the z-index (as suggested by a friend), however that doesn't seem to have any effect.
How would you go about fixing it?
Here's the relevant CSS:
a {
color: #CCCCCC;
}
a:hover {
background-color: #CCCCCC;
}
As you can see, The font color and background color are the same on hover. The z-index has nothing to do with it. Change the color on :hover and you will see the text, as demonstrated on this fiddle: http://jsfiddle.net/yVdvx/
Change this CSS code.
From:
a {
z-index: 10000;
text-decoration: none;
border-bottom: 1px dotted #666666;
color: #CCCCCC;
-webkit-transition: 0.25s ease;
transition: 0.25s ease;
}
a:hover {
background-color: #CCCCCC;
opacity: .9;
-webkit-transition: 0.25s ease;
transition: 0.25s ease;
}
To (my example makes a:hover color blue):
a {
z-index: 10000;
text-decoration: none;
border-bottom: 1px dotted #666666;
color: #CCCCCC;
-webkit-transition: 0.25s ease;
transition: 0.25s ease;
}
a:hover {
background-color: blue;
color: #393434;
opacity: .9;
-webkit-transition: 0.25s ease;
transition: 0.25s ease;
}
Besides, it may be good to include CSS code in a separate file and load it in the HTML file.
I am trying to create a menu and style it. I have also used some css animations to show a description (span) when hovered. This menu is working properly under Firefox. But in Chrome, there's a white space above the menu. When I check the li tag through Firebug, its show me that the li element is not aligned properly. Its moved upward. Its not happening on firefox. (please check the screenshots below). How can I fix this?
Update : I have just uploaded the site to Heroku : http://aqueous-wildwood-4051.herokuapp.com/. You will see the issue in this live site.
In chrome :
In Firefox :
Here's the code of my sidebar :
<aside id="sidebar" role="complementary">
<nav id="side-nav" role="navigation">
<ul>
<li ><div id='side-nav-home' class='listitem'><span class='listtitle'>Home</span><span class='description'>Home page of SLNYAA</span></div></li>
<li ><div id='side-nav-about' class='listitem'><span class='listtitle'>About Us</span><span class='description'>Learn more about us</span></div></li>
<li ><div id='side-nav-handbook' class='listitem'><span class='listtitle'>Handbook</span><span class='description'>Read our handbook</span></div></li>
<li ><div id='side-nav-join' class='listitem'><span class='listtitle'>Join Us</span><span class='description'>Join our program</span></div></li>
</ul>
</nav>
</aside>
Here is the CSS :
#sidebar {
border-left: 1px solid #EDEDED;
box-shadow: -3px 0 9px rgba(217, 217, 217, 0.2);
float: right;
min-height: 365px;
width: 24%;
#side-nav{
ul {
margin-top: 0px !important;
height: 187px;
list-style: none outside none;
margin-left: 0;
padding-left: 0;
width: 100%;
li{
height: 46px;
a{
text-decoration: none;
font-size: 14px;
color: #fff;
text-shadow: 1px 1px 1px #757575;
border-right: 1px solid rgba(217, 217, 217, 0);
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
.listitem {
list-style: none outside none;
height: 32px;
text-align: center;
padding-top: 10px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
.description {
visibility: hidden;
position: absolute;
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
position: absolute;
margin-left: 8px;
margin-top: 4px;
opacity: 0;
-webkit-transition: all 0.6s ease-in;
-moz-transition: all 0.6s ease-in;
-o-transition: all 0.6s ease-in;
-ms-transition: all 0.6s ease-in;
transition: all 0.6s ease-in;
}
&:hover {
text-align: left;
.description {
visibility: visible;
opacity: 1;
}
.listtitle{
margin-left: 7px;
border-right: 1px solid #FFFFFF;
padding-right: 7px;
}
}
}
}
}
#side-nav-home{
background-color: #ED0042;
border: 2px solid #E87998;
}
#side-nav-about{
background-color: #e1cf3b;
border: 2px solid #C4BD80;
}
#side-nav-handbook{
background-color: #009dda;
border: 2px solid #5EADCC;
}
#side-nav-join{
background-color: #6ba01e;
border: 2px solid #98AB7D;
}
}
}
}
Add display: block to the a CSS style
#main-container-border #main-container #sidebar #side-nav ul li a {
display: block;
text-decoration: none;
font-size: 14px;
color: #fff;
text-shadow: 1px 1px 1px #757575;
border-right: 1px solid rgba(217, 217, 217, 0);
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
jsfiddle