Hello guys here is my code to change color on hover. I can change the color of every object except one. -> SPAN_3
<li id="LI_2">
<span id="SPAN_3"></span> <fade>example text</fade>
</li>
.price-box:hover fade {
color: #fff;
}
**.price-box:hover span {
color: #ffffff !important;
}**
I cannot change the color of span. How can I fix this ? I searched the web but couldn't find with a solution.
Here is your issue fixed code
<li id="LI_2">
<span id="SPAN_3"><fade>example text</fade></span>
</li>
#SPAN_3:hover{color:red;}
#SPAN_3{color:#000;}
.price-box:hover fade {
color: #fff;
}
**.price-box:hover span {
color: #ffffff !important;
}**
See its working
li span{
color:red;
}
li:hover span{
color:black
}
<li id="LI_2">
<span id="SPAN_3">text for color change</span> <fade>example text</fade>
</li>
#SPAN_3{ color:#000;}
#LI_2{ color:#000;}
#LI_2:hover{ color:#ff0;}
#LI_2:hover{ color:#000;}
Related
I want to know how to change the color when hovering over a link
Thanks for any suggestions?
HTML:
<nav>
<a class="underline" href="welcome.html">./home </a>
<a class="underline" href="about.html">./about </a>
<a class="underline" href="projects.html">./projects </a>
<a class="underline" href="ctf.html">./ctf's</a>
</nav>
I did solve it by:
a[href] {
color: #ffff; /* Change this to which color you prefer */
}
In the css
Maybe you can add some css:
<style>
.underline:hover {
color: red; /* text color */
background-color: blue;
}
</style>
Add your own css file to overwrite bootstrap ->
nav a :hover{ color: #yourcolor; }
<style>
.underline:hover {
color: red !important; /* for link text color */
text-decoration: none; /* for delete under line */
}
</style>
I am styling a navbar using CSS to modify the .navbar-inverse within Bootstrap 3.
My current HTML:
<li class="dropdown">
<a class="dropdown-toggle hvr-glow" data-toggle="dropdown" href="#">My Sites
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>LinkedIn</li>
<li>Github</li>
<li>CodeSandbox</li>
</ul>
I want the to change the color of the link tag that says "My Sites" when I hover over it. Currently, when I hover the link it changes to the same color as the background, which is the color that the other links are supposed to be when hovered over... I do not want to change the hover effect of the other links.
My current CSS for the navbar is:
#banner{
width: 100%;
}
.navbar-brand{
letter-spacing: 3px;
color: #FDFFFC !important;
background-color: #011627 !important;
}
.navbar-brand:hover{
color: #E71D36 !important;
}
.navbar{
background-color: #011627 !important;
border: none !important;
}
.navbar-nav a{
color: #FDFFFC !important;
}
.navbar-nav a:hover{
color: #2EC4B6 !important;
}
.dropdown-menu{
background-color: #FF9F1C !important;
}
.dropdown-menu a:hover{
color: #011627 !important;
background-color: #FF9F1C !important;
}
.dropdown-toggle{
background-color: #2EC4B6 !important;
}
.navbar-inverse .navbar-nav > .active > a:hover{
color: #011627 !important;
}
Picture:
CSS next to my page. I am hovering the link that I cannot target
Try adding this?
.dropdown .dropdown-toggle:hover {
color: red;
}
and obviously change red in the hover to whatever color you want. Also you should only really use !important when its necessary, even for bootstrap where it is used a lot, you seem to be using it a little too much.
I want it so that when I hover over a <li>, the entire element has a highlight of blue, and that the text within the <li> turns from black to white. I also want it so that when I click on the <li>, the <li> becomes active and the blue highlight and change from black to white text stays. I understand I have to use the :hover and :active attributes. Here is my attempt therefore:
HTML:
<div class="facet">
<ul>
<li>
<a href="" class="link">
Name<span class="count">Count</span>
</a>
</li>
</ul>
</div>
CSS:
//Changes the LINK text to white
.link:hover {
background-color: #2897C5;
color: #ffffff;
}
//Attempt to change the entire parent element text to white and have a blue highlight, but this doesn't seem to work
.facet li:active {
background-color: #2897C5;
color: #ffffff;
}
//Normal CSS for the link when it is not hovered over or clicked on
.link {
font-size: 14px;
line-height: 1.3;
text-decoration: none;
display: block;
color: #000;
}
//White text when you hover over the count
.count:hover {
color: #ffffff;
}
//Normal CSS when you don't hover over the count
.count {
position: relative;
float: right;
color: #bdbdbd;
}
NowI have a variety of issues with my attempt above.
1. When I hover over the <li>, the entire thing turns blue which is great, and the "Name" text also turns white. However, the "Count" text only turns white when I have my mouse hover over that portion of the <li>.
2. When I click on the <li>, the element does not apply the active state (which is all white text and blue highlight) to the entire element.
Any ideas on how I can improve? Thanks!
Here's a better version with a lot less CSS: (no solution for the active-bit, but that will have to be solved outside CSS)
ul {
list-style-type: none;
}
.facet li:hover,.facet li:hover .link,.facet li:hover .count {
background-color: #2897C5;
color: #FFF;
}
.link {
font-size: 14px;
line-height: 1.3;
text-decoration: none;
display: block;
color: #000;
padding: .2em;
}
.count {
position: relative;
float: right;
color: red;
}
<div class="facet">
<ul>
<li>
<a href="#" class="link">
Name<span class="count">Count</span>
</a>
</li>
</ul>
</div>
I am working on a personal website using a template and have run into an issue with something I am trying to do. As it stands the following is working:
<nav id="nav">
<ul>
<li><span class="icon fa-home">Introduction</span></li>
<li><span class="icon fa-male">About Me</span></li>
<li><span class="icon fa-star">Resumé</span></li>
<li><span class="icon fa-heart">Current Projects</span></li>
<li><span class="icon fa-th">Skills & Hobbies</span></li>
<li><span class="icon fa-paper-plane">Contact</span></li>
</ul>
With the following css:
#nav ul li a.active span:before
{
color: green;
}
However I would like to make it so that each has a different colour when active. I am struggling with selecting the in css by ID while also making sure it is active.
i.e. about-link will be color: red when active, resume-link will be color: blue when active etc.
Thanks in advance!
When you have IDs, use them directly since they are unique:
nav ul li a {
color: black; /* common unactive color */
}
#about-link.active {
color: red;
}
#resume-link.active {
color: blue;
}
etc...
If you want the same effect for hover states and active class, you can do:
#about-link:hover, #about-link.active {
color: blue;
}
Use the following class CSS selector. Make sure on each page you regulate what link has the "active" class:
http://jsfiddle.net/clarketm/6ksmj8wv/2/
#about-link.active {
color: red;
}
#resume-link.active {
color: blue;
}
I have been trying to create a navigation bar for a website I am making, and I want each button to display a difference colour when highlighted. I have used <ul> to create the navigation bar. The question is, is there a way to use the "a:hover {background:#;}" as inline CSS on a specific element?
I have tried giving each <li> or <a> an id and then creating references to them in the internal style sheet, but can't get it to work. Below is what I have so far;
#menu {height:37px;display:block;margin:20px auto;border:1px solid;border-radius:5px;margin-left:30px;max-width:550px}
#menu ul {margin:0;padding:0;}
#menu li {float:left;display:block;min-width:110px}
#menu a {display:block;padding:12px;font:bold 13px/100% Arial, Helvetica, sans-serif;text-align:center;text-decoration:none;text-shadow:2px 2px 0 rgba(0,0,0, 0.8); background-color:#5A8A41;border-right:1px solid #1b313d; color:#fff;}
#menu a:hover {background:#5D80B0;}
...
<div id='menu'>
<ul>
<li class='active'><a href='#'><span>Home</span></a></li>
<li><a href='#'>XML</a></li>
<li><a href='#'>SQL</a></li>
<li><a href='#'>Java</a></li>
<li><a href='#'>C#</a></li>
</ul>
</div>
Just so your aware, I have been using html and CSS for all of 1 week. So I apologise if this is a stupid question. Thanks.
That's completely impossible; sorry.
Instead, you can create a CSS class for each color and apply the appropriate class to each link:
#menu a.red:hover { background: red; }
If you use :nth-child(X) pseudo class, you can do this without adding a class to every new li you add. For this, I had to move the background-color to li and also added a few other CSS properties, nothing much.
This will be your CSS for adding color:
#menu li:nth-child(1):hover { background: red; }
#menu li:nth-child(2):hover { background: blue; }
#menu li:nth-child(3):hover { background: purple; }
#menu li:nth-child(4):hover { background: yellow; }
#menu li:nth-child(5):hover { background: pink; }
DEMO
+ :nth-child
You could achieve this with jquery :)
$(document).ready(function() {
$('a').hover(function(){
$(this).parent().css({background-color: 'yellow'});
});
});
Inline javascript
<a href='index.html' onmouseover='this.style.textDecoration="none"' onmouseout='this.style.textDecoration="underline"'>Click Me</a>
In a working draft of the CSS2 spec it was declared that you could use pseudo-classes inline like this:
<a href="http://www.w3.org/Style/CSS"
style="{color: blue; background: white} /* a+=0 b+=0 c+=0 */
:visited {color: green} /* a+=0 b+=1 c+=0 */
:hover {background: yellow} /* a+=0 b+=1 c+=0 */
:visited:hover {color: purple} /* a+=0 b+=2 c+=0 */
">
</a>
but it was never implemented in the release of the spec as far as I know.
http://www.w3.org/TR/2002/WD-css-style-attr-20020515#pseudo-rules