I am trying to change color on hover of fa fa icon but not changing?
http://jsfiddle.net/Lgvbbqeo/25/
.fa-arrow-circle-right {
float:right;
color:white;
margin-right:10px;
}
.fa-fa-arrow-circle-right :hover{
color:#888888;
}
HTML:
<button type="button" class="buttonl">View Locations<i class="fa
fa-arrow-circle-right fa-2x"></i>
</button>
You have a little mistake in your selector
.fa-fa-arrow-circle-right :hover should be .fa-arrow-circle-right :hover or .fa :hover or .fa .fa-arrow-circle-right :hover
This worked
.buttonl:hover .fa-arrow-circle-right
Related
I have this span:
<span class="fa fa-green fa-arrow-circle-o-right" aria-hidden="true"></span>
I changed the colour like this:
.fa-green {
color: #008d4c;
}
However, the hover function does not work:
.fa-green:hover {
color: black;
}
What's wrong?
Your code looks fine. Make sure your hover style is not overridden by other styles or class.
html
<a href="#">
<span class="fa fa-green fa-arrow-circle-o-right fa-5x" aria-hidden="true"></span
</a>
<a href="#" class="more-power">
<span class="fa fa-green fa-arrow-circle-o-right fa-5x" aria-hidden="true"></span
</a>
css
.fa-green {
color: #008d4c
}
.fa-green:hover {
color: black
}
a.more-power:hover span {
color: #008d4c
}
Check this out https://jsfiddle.net/ayjwm23d/36/
I am looking in the devtools and it is revealing the following code:
.nav>li>a:focus, .nav>li>a:hover {
text-decoration: none;
background-color: #eee;
}
The problem is, I change these in my css file and it won't let me get rid of the grey background color. How can I override it?
Thanks in advance.
EDIT: Ended up being a ui-router issue, not a css issue. Sorry everyone, thanks for the troubleshooting. Changed:
<li ng-class="{active: stateis('app.contact')}" ui-sref-active="active">
<a ui-sref="app.contact"><i class="fa fa-phone"></i> Contact</a>
</li>
To this:
<li ui-sref-active="active">
<a ui-sref="app.contact"><i class="fa fa-phone"></i> Contact</a>
</li>
And is fixed
Remove ">" after nav class. Please Try this :
.nav li>a:focus, .nav li>a:hover {
text-decoration: none;
background-color: red;
}
Check out working fiddle
I am trying to achieve hover animation with font-awesome fa icon-circle.
Problem is "Facebook circle" animation seems comes with delay. How can i achieve faster light on animation without giving smaller number of animation time with transitions.
HTML
<ul class="social-icons">
<li>
<a href="#www.facebook.com/mobge">
<span class="fa-stack fa-3x socialSpan">
<i class="fa fa-circle fa-stack-2x circleIco">
</i>
<i class="fa fa-facebook fa-stack-1x secondIco">
</i>
</span>
</a>
</li>
[...]
</ul>
SCSS
.socialSpan, .circleIco, .secondIco{
-webkit-transition:all 0.4s; /* For Safari 3.1 to 6.0 */
transition:all 0.4s;
}
.social-icons{
li{
a{
color: $sublimeGray;
}
a:hover{
color: $facebookColor;
margin-top: 20px;
}
}
}
Example: http://codepen.io/anon/pen/zaBxE/
Thank you.
You apply a CSS transition to two extra elements here, which may slow the transition.
It concerns socialSpan's children so remove the transitions applied to:
.socialSpan {
transition:all 0.4s;
}
instead of
.socialSpan, .circleIco, .secondIco{
transition:all 0.4s;
}
Demonstration!
Trying to put the span class in the class="dropdown-toggle" so the icon shows more to left and becomes bigger.
Hos it looks now:
Code:
<span class="glyphicon glyphicon-ok"></span> Vakt <b class="caret"></b>
You can try this:
Demo
.dropdown-toggle
{
background:#eee;
color:#000;
text-decoration:none;
padding:15px 10px 15px 40px;
display:inline-block;
}
.glyphicon-ok{display:inline-block; padding-right:10px;}
You can add padding to the right of the span:
.dropdown-toggle .glyphicon.glyphicon-ok {
padding-right:30px;
}
I'm not sure how to make it larger.
Here is another post about making the glyphs bigger Bigger Glyphicons
To make it bigger can't you just increase height and width?
<span class="glyphicon glyphicon-ok" style="width:150%; height:150%"></span>
hei everyone :) so i'm making this menu and everything works perfectly until i make a new site for when you click on the links. then the links get active and when i then hover over the link. and it's supposed to get the background color and text color it get's when you hovering. it doesn't seem to work.
the background color still get's the same, but the text color just remain black instead of changing. and if i change the color on the text when you make it active, then the text will remain that color even if i'm not hovering. and it's only supposed to change when it's hovering.
my menu code in css:
.link{
float:left;
text-decoration:none;
color:#000000;
font-size:19px;
background:opacity:0.4;
width:130px;
padding-bottom:8px;
padding-top:8px;
padding-right:25px;
text-align:left;
padding-left:8px;
border-bottom:1px solid black;
border-top:1px solid black;
color:black;
line-height:1.5;
overflow:hidden;
text-align:left;
-webkit-transition: all 1s ease;
}
a:link:hover
{
background-color:black;
color:#18ffec;}
relevant code in html:
<div id="linki">
<p>
<a class="link" href="Index.html"> Hjem</a>
<a class="link" href="Guider.html"> Guider</a>
<a class="link" href="Om_oss.html"> Om oss</a>
<a class="link" href="Kontakt.html"> Kontakt oss</a>
<a class="link" href="Hjelp til"> Hjelp til </a>
</p>
</div>
appreciate any answer :)
You are specifying the class wrong, use a "." instead of a ":"
a.link:hover
I think you mean
a.link:hover
rather than
a:link:hover
You should use class name:
.link:hover
{
background-color:black;
color:#18ffec;
}
:link is a "a normal, unvisited link" so when it's visited the hover will not work. There is no need for a.link you can use just class name in this case.