I want to my text and image gain white color at the same time, when one of them is on hover.
How #btnicon can gain :hover, when li a is :hover?
li a {
transition: .7s ease-out;
color: #9d9d9d;
text-decoration: none;
display: block;
padding: 0 20px;
text-align: center;
line-height: 60px;
font-size:20px;
}
li a:hover{
transition: .7s ease-out;
color: #FFFFFF
}
#btnicon{
width:15px;
height:15px;
margin-right: 5px;
transition: .7s ease-out;
}
#btnicon:hover{
transition: .7s ease-out;
-webkit-filter: brightness(200%);
}
<li><img id="btnicon"src="http://s11.postimg.org/bqc94ncoj/home.png">Home</li>
Since the image is in inside a you can do this:
li a:hover #btnicon {
transition: .7s ease-out;
-webkit-filter: brightness(200%);
}
Related
Ease-in only works for text and background but ease-out only works for text but not background.
article {
width: 100%;
height: 1000px;
background-color: #fffff;
color: #00000;
}
article .topnav {
opacity: 0;
transition: background-color .9s ease-out;
transition: background-color .9s ease-in;
-moz-transition: background-color .9s ease-in;
-webkit-transition: background-color .9s ease-in;
}
article .topnav {
background: rgba(0,0,0,0);
transition: opacity .9s ease-out;
transition: opacity .9s ease-in;
-moz-transition: opacity .9s ease-in;
-webkit-transition: opacity .9s ease-in;
}
article:hover p.topnav {
opacity: 0.7;
background-color: #808080;
}
.topnav {
visibility: invisible;
text-align: center;
margin: auto;
width: 50%;
}
<article>
<p class="topnav">I am topnav</p>
</article>
Please see fiddle.
The idea is so that when I hover in and out of , both the text and the background eases in and out together.
Please help.
You are setting both transitions on the unhovered state, thus the second one is overwriting the first rule. You need to apply transition rules to both unhovered and hovered state.
article {
width: 100%;
height: 1000px;
background-color: #fffff;
color: #00000;
}
article p.topnav {
opacity: 0;
background-color: #000;
transition: all .9s ease-out;
}
article:hover p.topnav {
opacity: 0.7;
background-color: #808080;
transition: all .9s ease-in;
}
.topnav {
text-align: center;
margin: auto;
width: 50%;
}
<article>
<p class="topnav">I am topnav</p>
</article>
I'm quite a newbie to CSS and HTML, and have run into a problem that has me completely stumped - the transition effect I've applied to my navigation bar doesn't seem to be taking effect. I've searched for an answer to no avail, and feel ready to break something at this point. Below is my CSS for the navigation bar.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
li {
display: inline-block;
font-family: 'Oswald Light', Verdana, Geneva, sans-serif;
font-size: 20px;
background-color: #333;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
-ms-transition: all 0.9s ease;
transition: all 0.9s ease;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #6699cc;
}
You need to add the transition rules to li a - this is the element that is changing color, not the li!
See here http://jsbin.com/lufujuzuti/edit?html,css,output
You should replace your transition code to li a{}
So it'll be smth like this:
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
-ms-transition: all 0.9s ease;
transition: all 0.9s ease;
}
Your CSS edited :
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
li {
display: inline-block;
font-family: 'Oswald Light', Verdana, Geneva, sans-serif;
font-size: 20px;
background-color: #333;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
-ms-transition: all 0.9s ease;
transition: all 0.9s ease;
}
li a:hover {
background-color: #6699cc;
}
When you hover over "Login,Sign up" acorns website (https://www.acorns.com/) you can see animation going along. So I have a li
.navbar li{
display: inline-block;
border-width:5px;
border-top-style:solid;
border-top-color: white;
}
.navbar li:hover, .navbar li:active{
border-width:4px;
border-top-style:solid;
border-top-color: #e0b82b;}
How is it possible to make the border-top animated ? Like shown above. Thank you.
http://jsfiddle.net/9mfccz6w/
I'm trying to animate top bar (yellow)
You can add CSS Tranistions to your .navbar li style. Try this code:
.navbar li{
display: inline-block;
border-width:5px;
border-top-style:solid;
border-top-color: white;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
JSFiddle
.navbar li {
display: inline-block;
border-width:5px;
border-top-style:solid;
border-top-color: white;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.navbar li:hover {
-webkit-transform: translateY(-2px);
-moz-transform: translateY(-2px);
-ms-transform: translateY(-2px);
-o-transform: translateY(-2px);
transform: translateY(-2px);
}
The above code will spice up your li's a bit.
Look into CSS3 animations: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
I was expecting this from Internet Explorer, but my beloved Firefox let me down on this one.
This fiddle will not work (at least for me it did not) on Firefox and I would like to know why. I have seen a lot of documentation and I guess this should be working.
Here is the fiddle: http://jsfiddle.net/6UFX7/11300/
HTML:
<div id="nav">
<ul>
<li><a>ENTRY</a></li>
<li><a>ENTRY</a></li>
<li><a>ENTRY</a></li>
<li><a>ENTRY</a></li>
<li><a>ENTRY</a></li>
</ul>
</div>
CSS:
#nav
{
height:60px;
background-color:#FFFFFF;
overflow:hidden;
}
#nav ul
{
color: #f2f2f2;
margin-top:20px;
list-style-type: none;
text-align: center;
float:left;
}
#nav ul li
{
display: inline-block;
*display: inline;
zoom: 1;
margin: 0 10px;
}
#nav ul li a
{
color: #8198A0;
font-style: normal;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.25px;
text-transform: uppercase;
text-decoration: none;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-o-transition: color 0.5s ease;
transition: color 0.5s ease;
}
#nav ul li a:after
{
margin-top:16px;
content: "";
display: block;
height: 5px;
width: 0;
-webkit-transition: width 0.5s ease, background-color 0.5s ease;
-moz-transition: width 0.5s ease, background-color 0.5s ease;
-o-transition: width 0.5s ease, background-color 0.5s ease;
transition: width 0.5s ease, background-color 0.5s ease;
pointer-events:none;
}
#nav ul li a:hover:after
{
width: 100%;
background-color:#8198A0;
}
#nav ul li a:hover
{
cursor: pointer;
}
One more quick question about "pointer-events:none":
It is working fine on Internet Explorer but not on Chrome (I could not test it on Firefox because the above problem).
Thanks in advance!
This appears to be because the #nav ul li a elements are the default display: inline. Adding display: inline-block; to these elements fixes the issue.
Working Example:
#nav
{
height:60px;
background-color:#FFFFFF;
overflow:hidden;
}
#nav ul
{
color: #f2f2f2;
margin-top:20px;
list-style-type: none;
text-align: center;
float:left;
}
#nav ul li
{
display: inline-block;
*display: inline;
zoom: 1;
margin: 0 10px;
}
#nav ul li a
{
color: #8198A0;
font-style: normal;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.25px;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-o-transition: color 0.5s ease;
transition: color 0.5s ease;
}
#nav ul li a:after
{
margin-top:16px;
content: "";
display: block;
height: 5px;
width: 0;
-webkit-transition: width 0.5s ease, background-color 0.5s ease;
-moz-transition: width 0.5s ease, background-color 0.5s ease;
-o-transition: width 0.5s ease, background-color 0.5s ease;
transition: width 0.5s ease, background-color 0.5s ease;
pointer-events:none;
}
#nav ul li a:hover:after
{
width: 100%;
background-color:#8198A0;
}
#nav ul li a:hover
{
cursor: pointer;
}
<div id="nav">
<ul>
<li><a>ENTRY</a></li>
<li><a>ENTRY</a></li>
<li><a>ENTRY</a></li>
<li><a>ENTRY</a></li>
<li><a>ENTRY</a></li>
</ul>
</div>
As for the pointer-events issue, if this does not solve that issue as-well, you should probably ask a question specifically about that.
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 8 years ago.
I am trying to make it so that so that a hover effect will apply for both a listed item tag and an anchor tag that it is nested in. Ideally I want it so that all the CSS is on one tag instead of split into two. I want the hover effect of the anchor tag to animate when the listed element tag is triggered. I'm assuming the solution would be to merge the styles into one but I don't know how to do it.
HTML:
<ul class="nav">
<li>
CONTACT
</li>
<li>
ABOUT
</li>
<li>
PORTFOLIO
</li>
</ul>
CSS:
body{
background: #000;
}
ul{
list-style-type:none;
display: inline-block;
}
.nav{
float:right;
list-style-type:none;
overflow: hidden;
}
.nav li{
float:right;
overflow: hidden;
color: #00bff3;
border: 1px solid #00bff3;
padding: 8px;
margin-left: 10px;
text-align: center;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
.nav li:hover{
background:#00bff3;
color:#000000;
}
.blue{
color: #00bff3;
text-decoration: none;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
.blue:hover{
color:#000000;
}
http://jsfiddle.net/2gbu5yrz/
It's easy enough to move the relevant styles to the links themselves (really where they should be anyhow):
http://codepen.io/pageaffairs/pen/PwNeEO
.blue{
color: #00bff3;
text-decoration: none;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
display: block;
text-align: center;
padding: 8px;
}
.blue:hover{
color:#000000;
background:#00bff3;
}
Maybe this is what you are looking for: Replace .blue:hover with .nav li:hover .blue.
http://jsfiddle.net/p0ahhp5c/
The solution is to make your a use block display style:
.blue{
display: block;
color: #00bff3;
text-decoration: none;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
Try this
.nav:hover .blue:hover {
/*your code here*/
}