I've got a seemingly small issue I can't seem to correct no matter what I'm trying. This is a navbar problem with an element displaying a font awesome icon, and shows a red text and yellow background when I hover over this icon. The is outside the Dashboard but the Dashboard text doesn't highlight like the icon does. It abides by the navbar wishes. But the .fas or whatever is causing the highlights I'm trying to get rid of. Help me Overflow Kenobis. You're my only hope.
<li class="nav-item" style="">
<a class="nav-link btn " method="POST" href="/users/dashboard" style="">
<i class="fas fa-tachometer-alt "></i> Dashboard
</a>
</li>
You can use :hover on <a> tag instead of <i> and remove the :hover from icon...
...If you can't find the :hover of icon you can apply pointer-events:none to the icon.
Stack Snippet
.nav-item a:hover {
background: yellow;
color: red;
}
.nav-item a i:hover {
background: red;
color: black;
}
.nav-item a i {
pointer-events: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<ul class="nav">
<li class="nav-item" style="">
<a class="nav-link btn " method="POST" href="/users/dashboard" style="">
<i class="fa fa-tachometer"></i> Dashboard
</a>
</li>
</ul>
I would suggest inspecting it with Chrome Dev Tools / Firebug. When you select the element there is a tab with set of its CSS rules and you can figure out which css class causes the problem.
Hope it helps
Related
I'm trying to change the color of all elements inside of an anchor tag. These elements are i and span. However, I can't get my solution to work. Should I change the color one by one in CSS?
HTML and CSS
.active-link {
color: #2268ff;
}
<li class="nav__item">
<a href="#home" class="nav__link active-link">
<i class="bx bx-home nav__icon"></i>
<span class="nav__name">Home</span>
</a>
</li>
You can directly add the class name to the "li" tag
.active-link {
color: #2268ff;
}
<li class="nav__item active-link">
<a href="#home" class="nav__link ">
<i class="bx bx-home nav__icon"></i>
<span class="nav__name">Home</span>
</a>
</li>
What you have shared should work. If this isn't working, I suspect some other CSS rules are overriding your CSS.
By default there shouldn't be a style attached to the <span> or <i> elements. They might get one from the browser (user agent stylesheet) or (like in your case) it should come from its parent (inherited from).
Screenshot from browser developer tools
.active-link > * {
color: #2268ff;
}
<li class="nav__item active-link">
<a href="#home" class="nav__link ">
<i class="bx bx-home nav__icon"></i>
<span class="nav__name">Home</span>
</a>
</li>
im trying to fire a class when a hover a button, basically inside of my href i have a i icon tag that needs to change color: but is not working:
my css and html:
.catalog-icons i:hover{
color: #ba658a;
}
.catalog-icons .btn-icon:hover ~.catalog-icons i:hover{
color:#ba658a;
background-color: white;
}
<li class="list-inline-item">
<a class="btn btn-icon" href="">
<i class="fontello-icon icon-vet"></i>
</a>
</li>
I added an image since your code does not provide any.
Your rule should be simple:
.your_hovered_element_class:hover affected_elemnt_inside
in your case once .btn-icon is hovered, you change the i background color
.btn-icon:hover i{
background-color: #ba658a;
}
i img {
height: 1em;
}
<li class="list-inline-item">
<a class="btn btn-icon" href="">link text
<i class="fontello-icon icon-vet"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-person-outline-128.png" /></i>
</a>
</li>
I have defined this:
.grade a{
color: white;
}
It works. too well..
I have an html like so
<li class="grade">
<a><i class="fa fa-star fa-fw"></i></a>
My Text
</li>
The bootsrap i star element is painted white. And I don't want it to.
How can I only specify element with a of class .grade
<a class="grade"> Text here should be white </a>
and not other elements?
As is, you are selecting any a element which is a descendant of an element with the class grade.
To specify an a element that has the grade class itself, change your selector to:
a.grade
a.grade {
color: red;
}
.grade a {
color: green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<li class="grade">
<a><i class="fa fa-star fa-fw">Text within an <a> descendant of .grade</i></a><br>
Text outside of <a> element
</li>
<a class="grade"> Text in an <a> element, which has the class grade itself. </a>
Use typeTag.className for target a element:
li.grade {
color: red;
}
li.grade a i {
color: green;
}
a.grade {
color: blue;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<li class="grade">
<a><i class="fa fa-star fa-fw"></i></a>
My Text
</li>
<a class="grade"> Text here should be white </a>
Use style like below
a.grade {
color : red;
}
Demo : https://jsfiddle.net/e73t9mtk/
Firstly, you never said what color you wanted the i to be, only that you didn't want it to be white. So I'll assume it should be the same color as the body. Write this.
body, .grade i {
color:#777;
}
Secondly, if you want not only the a elements inside a .grade white, but only the as that have class grade themselves, you will have to add a.grade as a selector too.
.grade a, a.grade {
color: white;
}
So the complete code to do what you want is as follows.
html {
background:#ddd;
}
body, .grade i {
color:#777;
}
.grade a, a.grade{
color: white;
}
<ul>
<li class="grade">
<a><i class="fa fa-star fa-fw">(icon goes here)</i></a>
My Text
</li>
</ul>
<a class="grade"> Text here should be white </a>
(Note that I added a bit of text to the icon, to make it visible in the absence of FontAwesome.)
I have made a list with bootstrap and I would like to change the background-color of each item. I have this:
.list-group {
background-color: black;
}
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<picture>
<img class="imagenLista" src="myimage">
</picture>
<p>
<br>sometext
</p>
</a>
</div>
I am using chromium and firefox and I have the same problem, but the curious thing is that in JSBin, it works. I am using sublime text(I don't know if it is important) also.
You should target list-group-item not list-group
Here's a working example (with bootstrap imported)
Please add your css to list-group-item
.list-group{
background-color: black;
}
a.list-group-item.list-group-item-action {
background-color: #000;
}
https://jsfiddle.net/oski369/2Lzc6q95/
When I plug it into js fiddle, the background color of each li changes according to it's class (even or odd) as I want them to. However when I run the same code in my browser the background colors are ignored. I also note that in the fiddle the "cover" property I put in my background-image is ignored while it works fine in my browser.
I am using bootstrap in my text editor while obviously that is not the case in fiddle. Idk if this could be the issue but how would I accomplish the same alternating color change between list items that appears in the fiddle in my text editor?
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
<link rel="stylesheet" type="text/css" media="all" href="css/animate.min.css"/>
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link href="css/stockData.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body class="text-primary">
<h1 >StockData</h1>
<div class="row" id="stockTable">
<ul>
<li class="odd">
<span class="col-md-4">Ticker</span>
<span class="col-md-4">% Change</span>
<span class="col-md-4">Position</span>
</li>
<li class="even">
<a class="col-md-4">AAPL</a>
<span class="col-md-4">+3%</span>
<span class="col-md-4"> <span class="holding">5.4</span><span>%</span> <span>Short</span></span>
</li>
<li class="odd">
<span class="col-md-6">Portfolio</span>
<span class="col-md-6">+2.4%</span>
</li>
</ul>
</div>
<script src="stockData.js"></script>
</body>
</html>
CSS:
#stockTable {
width:38%;
margin-left: 2px;
}
.odd{
background:rgba(0,0,0,.8);
}
.even{
background:rgba(0,0,0,.6);
}
ul{
list-style-type:none;
}
body{
background-image:url('http://evilcorps.com/wp-content/uploads/2014/12/wall_street_1920.jpg');
background-size: cover;
}
h1{
margin-left: 2px;
}
If i understood your question correctly, you want to give background colour to to children of list item li depending on whether they are odd or even.
You should use nth-child in css on the children of list item li to accomplish this.
You should try something like this:
1) The css style given below will make the background of all even children as blue.
li span:nth-child(2n){
background:#00f;
}
2)The css style given below will make the background of all odd children as white.
li span:nth-child(2n+1){
background: #fff;
}
i hope that helps :)
In your span and a tags you are defining the bootstrap columns with class="col-md-4" or class="col-md-6" respectively. Try giving the li tags a row of their own to house those columns.
<li class="odd row">
<span class="col-md-4">Ticker</span>
<span class="col-md-4">% Change</span>
<span class="col-md-4">Position</span>
</li>
<li class="even row">
<a class="col-md-4">AAPL</a>
<span class="col-md-4">+3%</span>
<span class="col-md-4"> <span class="holding">5.4</span><span>%</span> <span>Short</span></span>
</li>
<li class="odd row">
<span class="col-md-6">Portfolio</span>
<span class="col-md-6">+2.4%</span>
</li>
Here's a demo on boot.ply that should have all your bootstrap code built in.
Try this:
.odd{
background:rgba(0,0,0,.8) !important;
}
.even{
background:rgba(0,0,0,.6) !important;
}
"!important" will override any other styles.
OK, so if it's considered a hack, then I think the only way for you to do that is to change values in Bootstrap.css or do it with your own classes or something like this:
li {
background:rgba(0,0,0,.8);
}
li:nth-of-type(2n) {
background:rgba(0,0,0,.6);
}
While you should remove .odd and .even class or it won't work. You can give to ul your own class and then write ul.class-name li { } in CSS instead of li to make it change only this specific ul's li colors.