How can i make it work so that when i hover my li > a it also changes color on my glyphicon. I have listede below my html and what i tryed to do in css. But that does only change it if i hover the glyphicon and not the a. And yes i have also tryed to change it on my a but that dosen't effect my glyphicon.
Html:
<li class="pushy-item">
<a href="#">History
<span class="glyphicon glyphicon-list-alt opacityDown pull-right"></span>
</a>
</li>
Css:
ul > li > a > .glyphicon:hover{
color: orange;
}
`
You can try this:
ul > li > a:hover > .glyphicon
div > .glyphicon-heart:hover {
color: rgb(102, 102, 101);
cursor: pointer;
}
<div class = "heart">
<span class = "glyphicon"
[class.glyphicon-heart] = "isLiked"
(click) = "onClick()" >
</span>
</div>
Related
I am trying to make div element visible on focus but it is not working. If i change focus to hover it works
JSFIDDLE https://jsfiddle.net/9bo81jyy/8/
HTML
<div class="test">
<nav class="nav">
<ul class="navtabs">
<li>
<a href="showMe/1">
<div class= "inside">
<div tabindex="0" class="delete">
<button tabindex="-1" class="fa-times-circle"> </button>
</div>
</div>
</a>
</li>
</ul>
</nav>
</div>
CSS
.nav > ul.navtabs > li > a > div:focus .delete{
display: inline !important;
}
.delete{
display: none;
}
only a tag ll be focousable so use below code it'll work...i have updated the jsfiddle
.nav > ul.navtabs > li > a:focus .delete{
border: 1px solid red;
display: inline;
}
This <div tabindex="0" class="delete"> is not available in the DOM because of this CSS:
.delete{
display: none;
}
So that <div> can never be clicked on and can never receive focus.
Instead try focus on the <a> tag:
ul.navtabs a:focus .delete{
display: inline !important;
}
And remove the tabindex="0" on the <div>.
.myActive{
background:white;
color: red;
}
.navbar > li > a:hover,
.navbar > li > a:focus{
background: ;
color: #333;
}
<ul class="navbar">
<li> Home</li>
<li> Categories</li>
<li> About us</li>
<li class="myActive"> Contact</li>
</ul>
I want to change color of my text in <a> tag so I write a class that change background of li tag but it's not changed my color text in li.
After a little research I understand that I need to add <span> to my text.
but I don't understand why i need do this, <a> and <span> are inline elements.
.navbar > li > a:hover,
.navbar > li > a:focus{
background: white;
color: #333;
}
and why pseudo class focus do the work ?
If you want change your link color:
.navbar > li > a{
color: red;
}
not
.navbar > li{
color: red;
}
So add CSS for the link element not the li.
You don't need span.
Focus works because you write css for the link element in focus state.
Assuming your HTML is like this
<ul>
<li><a href="http://www.thesite.net>This Site</a></li>
</ul>
To change the text colour of the link the css is simple
li a{ color: red;}
I would also recommend adding a hover colour:
li a:hover{color: blue;}
I used Font Awesome for the icon and in the hover it is what I like this resultsenter image description here
and also I have this problem when a link is selected that is what I have enter image description here
I use bootstrap
.nav > li > a:hover
{
background-color: transparent;
}
.iconetwitter
{
color: #ffffff;
width: auto;
height: 33px;
position: relative;
border-radius: 5px;
transition: background-color color 0.2s, font-size 0.2s , ease-in-out;
}
.iconetwitter:hover , .iconetwitter:focus ,.iconetwitter:active
{
color: #1DA1F2;
background-color: white;
}
<ul class="nav">
<li class="contacteicone col-md-3">
<a href="#" class="monicone">
<span class="fa-stack fa-lg">
<i class="fa fa-twitter-square iconetwitter fa-stack-2x"></i>
</span>
</a>
</li>
</ul>
Got it...
The strange hover state is caused by the background color of your font-awesome icons. The background is larger than the character. Correct this with line-height, like this:
.fa {line-height: 0.85em;}
Or use the nicer solution is described here: https://stackoverflow.com/a/27382026/2397550. Then you should use this icon for the underlying square: http://fontawesome.io/icon/square/
The white area behind a focussed icon is because you did this:
.nav > li > a:hover {background-color: transparent;}
This should be:
.nav > li > a:hover, .nav > li > a:focus {background-color: transparent;}
I have the html code something like this:
<li class="sprite-ps2 wishlist">
<a href="/wishlist/">
My Wish
<br>
List
<p>
<i class="fa fa-list-alt fa-3x"></i>
</p>
</a>
</li>
I need to change background of li in blue color and everything inside of them to be color:white on mouse hover on the li element.
See this fiddle, you need to set background blue for li:hover, and li:hover * to be color white
li:hover {
background: blue;
}
li:hover,
li:hover * {
color: #fff;
}
<li class="sprite-ps2 wishlist">
<a href="/wishlist/">
My Wish
<br>
List
<p>
<i class="fa fa-list-alt fa-3x"></i>
</p>
</a>
</li>
Put the following in a <style> element or a .css file:
li:hover {
background-color: blue;
color: white;
}
Because all child elements inside <li> inherit the properties of their parent, they will have a white color (and a blue background too if they don't specify their own).
Here is my html
<div class="pure-u" id="menu" data-ng-controller="gotoUrl">
<div class="pure-menu pure-menu-open">
<a class="pure-menu-heading"
href="#">PennyTracker</a>
<ul>
<!-- Add Transaction Button -->
<li>
<button
class="pure-button pure-button-success pure-button-large"
data-ng-click="setRoute('new')">
<i class="icon-plus"></i>
Transaction
</button>
</li>
......
</div>
and here is the css I try to change the color when hover on li
.pure-menu li.hover {
background: red;
color: #000000;
}
But I see no red color when I hover, I see
What is that I am doing wrong?
You must put : instead of . ,hover is not a class.
.pure-menu li:hover {
background: red;
color: #000000;
}