I work with bootstrap a lot and sometimes it's really hard to figure out why certain things don't work when you want to override certain CSS decisions bootstrap makes for you.
So i've been trying to change the background color on a button on hover so that each button gets a different color on mouse hover. But somehow my css class doesn't override it.
Here is what I have so far:
<style type="text/css">
.fblue_background>li>a:hover, .fblue_background>li>a:focus {
background-color: blue !important;
}
.tblue_background>li>a:hover, .fblue_background>li>a:focus {
background-color: blue !important;
}
.pred_background>li>a:hover, .fblue_background>li>a:focus {
background-color: red !important;
}
</style>
<li><a class="fblue_background" target="_blank" href="https://www.facebook.com/url"><i class="fa fa-facebook"></i></a></li>
<li><a class="tblue_background" target="_blank" href="https://twitter.com/url"><i class="fa fa-twitter"></i></a></li>
<li><a class="pred_background" target="_blank" href="https://www.pinterest.com/url"><i class="fa fa-pinterest-p"></i></a></li>
PS: it also doesn't work when I put the class value between <li>
The problem is you're delcaring .fblue_background as if it's the parent of the li, this isn't the case. See revised code below:
<style type="text/css">
li>a.fblue_background:hover, li>a.fblue_background:focus {
background-color: blue !important;
}
li>a.tblue_background:hover, li>a.tblue_background:focus {
background-color: blue !important;
}
li>a.pred_background:hover, li>a.pred_background:focus {
background-color: red !important;
}
</style>
<li><a class="fblue_background" target="_blank" href="https://www.facebook.com/url"><i class="fa fa-facebook"></i>Hello</a></li>
<li><a class="tblue_background" target="_blank" href="https://twitter.com/url"><i class="fa fa-twitter"></i>Bonjour</a></li>
<li><a class="pred_background" target="_blank" href="https://www.pinterest.com/url"><i class="fa fa-pinterest-p"></i>Hi</a></li>
When you are using the > method in CSS it would strictly follow the HTML markup. So when you want to change the a element, you should be doing
a.blue{
background:#0000ff;
}
Try this
.nav>li>.blue:hover, .nav>li>.red:focus {
background-color: blue !important;
}
.nav>li>.green:hover, .nav>li>.blue:focus {
background-color: #5EACC5 !important;
}
.nav>li>.red:hover, .nav>li>.red:focus {
background-color: red !important;
}
To change background of <a> link you just need to add :hover for class directly like this.
<style type="text/css">
.fblue_background:hover, .fblue_background:focus {
background-color: blue;
}
.tblue_background:hover, .fblue_background:focus {
background-color: blue;
}
.pred_background:hover, .fblue_background:focus {
background-color: red;
}
</style>
<ul>
<li><a class="fblue_background" target="_blank" href="https://www.facebook.com/url"><i class="fa fa-facebook"></i>Facebook</a></li>
<li><a class="tblue_background" target="_blank" href="https://twitter.com/url"><i class="fa fa-twitter"></i>Twitter</a></li>
<li><a class="pred_background" target="_blank" href="https://www.pinterest.com/url"><i class="fa fa-pinterest-p"></i>Pinterest</a></li>
</ul>
jsfiddle link: https://jsfiddle.net/g9y2v91e/
Related
I am having two hover classes as shown
.Link2:hover{
color:black;
}
.Li2:hover{
background-color: white;
border-color: white;
}
Here is the JSX part:
<ul>
<li className={classes.Li1}>
<Link onClick={this.menuDisappearHandler}
to='/buyer'
className={classes.Link1}>I want to Buy
</Link>
</li>
<li className={classes.Li2}>
<Link onClick={this.menuDisappearHandler}
to='/seller'
className={classes.Link2}>I want to Sell
</Link>
</li>
</ul>
I want both hover classes to execute when I hover over Li2. How can I achieve it?
How to affect other elements when one element is hovered
You could do this for example if they are next to each other in HTML.
.Li2:hover {
background-color: blue;
border-color: white;
}
.Li2:hover + .Link2 {
color: red;
}
I want to change the background color of ngx-pagination
My code:
<pagination-controls class="custom-pagination" id="indicadorPaginationResults" (pageChange)="p=$event" maxSize="9" directionLinks="true" autoHide="true" previousLabel="" nextLabel=""></pagination-controls>
The default background color is blue, and I want to change to red.
How do I it?
Solution:
In the CSS:
.custom-pagination /deep/ .ngx-pagination .current {background: red;}
And install jquery in the project.
Use pagination-template instead of pagination-controls.
Example:
<pagination-template
#p="paginationApi"
(pageChange)="onPageChange($event)"
*ngIf="myList">
<div class="pagination-custom">
<ul class="pagi">
<li class="item">
<a *ngIf="!p.isFirstPage()"
[class.disabled]="p.isFirstPage()"
(click)="p.previous()"
class="page-link"
aria-label="Previous">
<span aria-hidden="true" class="la la-caret-left"></span>
<span class="sr-only">Previous</span>
</a>
</li>
<li *ngFor="let page of p.pages"
[class.active]="p.getCurrent() === page.value"
class="page-item">
<a (click)="p.setCurrent(page.value)"
class="page-link"> {{ page.label }}
</a>
</li>
</ul>
</div>
</pagination-template>
You can achieve this by editing paginator in the CSS file. For example (red background and red border):
.page-item.active .page-link {
background-color: red;
border-color: red;
}
You can add this for global css file.
An example of fully red paginator:
.page-item.active .page-link {
background-color: red;
border-color: red;
}
.page-link {
color: red;
}
.page-link:hover {
color: red;
}
(document.querySelector('.pagination-next') as HTMLElement).style.color = 'black';
(document.querySelector('.pagination-previous') as HTMLElement).style.color = 'black';
for angular
I am trying to remove an underline from links on a website. I tried to use "text-decoration: none;" but it wouldn't work. What syntax did I do wrong? or is there a better way to remove the underline?
<head>
<style>
font {
color: #ff9600;
text-decoration: none;
}
</style>
</head>
<body>
<a href="index.html">
<font>Home</font>
</a>
<a href="watch.html">
<font>Watch</font>
</a>
<a href="info.html">
<font>Info</font>
</a>
</body>
You should use
a {
text-decoration: none;
}
in your stylesheet. text-decoration is what adds the underline, and this code removes it.
Side Note: Also, you should not be using the <font> tag, as it is obsolete. You should be using classes.
Try this:
<head>
<style>
font {
color: #ff9600;
text-decoration: none;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<a href="index.html">
<font>Home</font>
</a>
<a href="watch.html">
<font>Watch</font>
</a>
<a href="info.html">
<font>Info</font>
</a>
</body>
check it out hope it would work..[![
<head>
<style>
font {
color: #ff9600;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="index.html">
<font>Home</font>
</a>
<a href="watch.html">
<font>Watch</font>
</a>
<a href="info.html">
<font>Info</font>
</a>
</body>
]1]1
Just move text-decoration: none; from font CSS to anchor tag a CSS. Will resolve your issue. Thanks
a {
text-decoration: none;
}
a {
text-decoration: none;
}
font {
color: #ff9600;
}
<a href="index.html">
<font>Home</font>
</a>
<a href="watch.html">
<font>Watch</font>
</a>
<a href="info.html">
<font>Info</font>
</a>
The reason that your code still has an underline, is because the Anchor tag <a> by default add the underline decoration to everything inside the tag. So you will have to apply the style to the "a" instead of the font - even though the font is inside the anchor.
<style>
a {
text-decoration: none;
}
</style>
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
Iam working in Jquery mobileI have an footer like this:
<div data-role="footer" data-position="fixed" data-id="footer" data-tap-toggle="false">
<div class="footer" data-role="navbar">
<ul>
<li>
<a href="#dashboard" data-icon="dashboard" class="footer-icons" id="icon-dashboard">
<span class="navbar-text">Dashboard</span>
</a>
</li>
<li>
<a href="#notifications" data-icon="progress" id="icon-progress" class="footer-icons">
<span class="navbar-text">Voortgang</span>
</a>
</li>
<li>
<a href="#map" data-icon="security" id="icon-security" class="ui-btn-active footer-icons">
<span class="navbar-text">Plattegrond</span>
</a>
</li>
<li>
<a href="#" data-icon="security" id="icon-security" class="footer-icons">
<span class="navbar-text">Securitycheck</span>
</a>
</li>
</ul>
</div>
</div>
I want to change the color of <span class="navbar-text"></span> when its parent is set to active I thought something like this:
.footer > .ui-btn-active > .navbar-text {
color: red!important;
}
But this is not working maybe someon could help me out on this?
The issue is because .ui-btn-active is not a child of .footer as the > requires - it's a grandchild. Remove that operator:
.footer .ui-btn-active > .navbar-text {
color: red !important;
}
Working example
Alternatively if you want to use the child selector, you need to explicity set the full hierarchy in the selector:
.footer > ul > li > .ui-btn-active > .navbar-text {
color: red !important;
}
Also note that the use of !important should be avoided at all costs. If you need to override a setting, make the selector more specific.
I like the :nth-child(n) selector:
a.ui-btn-active > span:nth-child(1) {
background: red;
}