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>
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>
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'm using a service which doesn't allow me to modify the code, but I"m able to add my own CSS. I am trying to change the CSS of a specific Link inside a li.
Here is my code:
<div class="kn-menu kn-view view_81" id="view_81">
<ul class="kn-tab-menu kn-grid-6">
<li class="kn-link-1"><span><i class="fa fa-bullseye"></i> I'm On Site</span></li>
<li class="kn-link-2"><span><i class="fa fa-pencil-square-o"></i> 1. Onsite Staff Signature</span></li>
<li class="kn-link-3"><span><i class="fa fa-pencil"></i> 2. Service/Signature</span></li>
<li class="kn-link-4"><span><i class="fa fa-ban"></i> 3. N/A - R</span></li>
<li class="kn-link-5"><span>Add Comments</span></li>
<li class="kn-link-6"><span><i class="fa fa-check"></i> 4. Completed</span></li>
</ul>
</div>
I want to select only the very first list item and tweak the css settings of the link within it - I want to make the background color and text different. Using the following allows me to change somethings but not the actual text within that li.
.kn-link-1 {
}
I also want to make sure that this change only happens for this specific instance where the parent id="view_81".
Can someone help find the right way to select just that
CSS is not the right place where you should change the content, anyway if you have no other choice, you could use the :after selector to do the following trick:
#view_81 > ul > li:nth-child(1) > a > span {
display: none;
}
#view_81 > ul > li:nth-child(1) > a:after {
background-color: red;
content: "your text";
}
<div class="kn-menu kn-view view_81" id="view_81">
<ul class="kn-tab-menu kn-grid-6">
<li class="kn-link-1"><span><i class="fa fa-bullseye"></i> I'm On Site</span>
</li>
<li class="kn-link-2"><span><i class="fa fa-pencil-square-o"></i> 1. Onsite Staff Signature</span>
</li>
<li class="kn-link-3"><span><i class="fa fa-pencil"></i> 2. Service/Signature</span>
</li>
<li class="kn-link-4"><span><i class="fa fa-ban"></i> 3. N/A - R</span>
</li>
<li class="kn-link-5"><span>Add Comments</span>
</li>
<li class="kn-link-6"><span><i class="fa fa-check"></i> 4. Completed</span>
</li>
</ul>
</div>
have you tried:
#view_81 ul li.kn-link-1
or
#view_81 ul li:first-child
To clarify my examples: "#" selector in CSS means "the one with the following ID" and then i'm telling the "ul" that comes after that and then the "li" that comes after that which has this class "kn-link-1" or which is the first item inside the tag (:first-child subselector).
I hope some of them help.
use this style:
li:first-of-type span
{
}
also be sure that your style link is last in your style references. If this does not help, declare your styles with "!important" like here:
li:first-of-type span
{
color:red !important;
}
using the selectors: #view_81 .kn-link-1 a targets the element with id="view_81" and the descendant element with class="kn-link-1" and the a tag inside that to change the background and text color.
#view_81 .kn-link-1 > a {
background: red;
color: yellow;
}
<div class="kn-menu kn-view view_81" id="view_81">
<ul class="kn-tab-menu kn-grid-6">
<li class="kn-link-1"><span><i class="fa fa-bullseye"></i> I'm On Site</span></li>
<li class="kn-link-2"><span><i class="fa fa-pencil-square-o"></i> 1. Onsite Staff Signature</span></li>
<li class="kn-link-3"><span><i class="fa fa-pencil"></i> 2. Service/Signature</span></li>
<li class="kn-link-4"><span><i class="fa fa-ban"></i> 3. N/A - R</span></li>
<li class="kn-link-5"><span>Add Comments</span></li>
<li class="kn-link-6"><span><i class="fa fa-check"></i> 4. Completed</span></li>
</ul>
</div>
I would stylize the css like this:
<style>
#view_81 .kn-link-1{
padding: 50px;
background-color: gray;
}
#view_81 .kn-link-1 a{
text-decoration: none;
}
#view_81 .kn-link-1 span{
color: white;
font-weight: bold;
text-shadow: 1px 2px 2px black;
}
</style>
This css only applies to the class .kn-link-1 within id #view_81.
I added a little basic css for your testing purposes, but you get the point.
I have bought a template with a tab tour element (kind of a menu that unfolds different content) and I wanted to change the color of the text inside the list.
Each and every tab needs to have a different color. So first one red, second blue, third green and fourth yellow. I tried everything with childs, element, classes etc. but no result.
Here is one of the codes I tried
#one a
{
color:#e28844
}
<ul class='cmsms_tabs_list'>
<li id="one" class="cmsms_tabs_list_item">
<a href="#">
<span>One</span>
</a>
</li>
<li id="two" class="cmsms_tabs_list_item">
<a href="#">
<span>Two</span>
</a>
</li>
<li id="three" class="cmsms_tabs_list_item">
<a href="#">
<span>Three</span>
</a>
</li>
<li id="four" class="cmsms_tabs_list_item">
<a href="#">
<span>Four</span>
</a>
</li>
</ul>
You can add following style
.cmsms_tabs_list li:nth-of-type(1) a span {
color : red;
}
.cmsms_tabs_list li:nth-of-type(3) a span {
color : blue;
}
.cmsms_tabs_list li:nth-of-type(4) a span {
color : green;
}
.cmsms_tabs_list li:nth-of-type(2) a span {
color : yellow;
}
For reference - http://jsfiddle.net/s1s12w2x/1/
So we have the menu above. That I need to construct for a WordPress template. I have no idea how to make the hover and active states. Untill now I have this:
HTML (followed how WordPress will generate the code):
<nav id="nav-main" role="navigation">
<div class="menu-primary-navigation-container">
<ul id="menu-primary-navigation" class="menu">
<li>
<a href="#" title="">
Home
</a>
</li>
<li>
<a href="#" title="">
Menu Link
</a>
</li>
<li>
<a href="#" title="">
Menu Link
</a>
</li>
<li>
<a href="#" title="">
Menu Link
</a>
</li>
<li>
<a href="#" title="">
Menu Link
</a>
</li>
<li>
<a href="#" title="">
Menu Link
</a>
</li>
</ul><!-- #menu-primary-navigation -->
</div><!-- .menu-primary-navigation-container -->
</nav><!-- #access -->
Then I have the CSS:
#nav-main {
width: 956px;
height: 44px;
border: 1px solid #a5a5a5;
background: url(images/bg-nav-main.jpg) repeat-x;
}
.menu-primary-navigation-container {}
#menu-primary-navigation {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu-primary-navigation li {
height: 44px;
display: inline-block;
}
#menu-primary-navigation li a {
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
text-decoration: none;
line-height: 44px;
padding: 0 46px;
}
#menu-primary-navigation li a:hover {}
And this is all. Here I am stucked. Those slashes are the bad points of this menu.
Any ideas?
Make graphics that way:
Yellow represents transparent color.
Then add negative margin to <li> so they will be next to each other without spaces.
To make the active state you have to add some php to the menu to check the current site:
<nav id="nav-main" role="navigation">
<div class="menu-primary-navigation-container">
<ul id="menu-primary-navigation" class="menu">
<li <?php if (is_page('home')) { echo "class='active'"; }?> >
<a href="#" title="">
Home
</a>
</li>
<li <?php if (is_page('menulink')) { echo "class='active'"; }?> >
<a href="#" title="">
Menu Link
</a>
</li>
For more information read this tutorial here: Tutorial
Then you have to make rectangular images for each menubutton and define it for the <li> elements as a background. You can also make one for all menu elements. With the 'active' class, which get set up by wordpress, you can define a different background for the active menu element.
For the hover of the menu elements you just have to add a background definition in css for
#menu-primary-navigation li a:hover {}