A not-super-advanced coder here.I'm seeking to "simply" adjust the styling of an active link in a sub-navigation on a site.
Example page:
http://printergatherer.com/shop
Referencing the minty green sub-nav that has "ALL ... PRINTS" in it.
Right now, I have styling that effects the active link in ALL navigations on the site. Ideally I have one set of styles for the main nav, and one for this sub nav.
I've managed to add a mint green underline to the active link, which is great, but for whatever reason I just CANNOT get the link color itself to change to the same mint green.
This code gets the bottom-border, but not the correct link color:
#categoryNav ul li.active-link {
color: #C6D4D0;
border-bottom: 1px solid #C6D4D0;
}
Sorry if I'm being a noob, I am about to tear my hair out about something that seems so simple!
You just need to move the color off of the li and on to the anchor tag like so:
.active-link a {
color: #c6d4d0;
border-bottom: 1px solid #c6d4d0;
}
you can see a jsfiddle of it working here:https://jsfiddle.net/24k1zep4/3/
your CSS is really specific, if you can't change that you may have to actually use a more specific selector.
#categoryNav .category-nav-links .active-link a {
color: #c6d4d0;
}
should work if you can't change the specificity and need to override what is already there.
Related
I am trying to create a button with text inside. I want it so that when you hover over the box, the color of the box changes to white, and the colour of the text changes to blue.
How can I add css to make my text and box change colors on hover?
Edited: I got the html snippet for that from another part of the website template I am editing. It is basically a box that does exactly what I have outline above. I then placed it inside the list tag of the menu html, hoping that it will just transfer the functionality but it didn't work. So I tried to add the [hover:] but it still isn't working.
I know I am doing something wrong but I don't know enough to know what it is.
Code snippet is for html:
Upload resources
Use the :hover pseudo selector
e.g.
button {
color: white;
background: blue;
}
button:hover {
color: blue;
background: white;
}
Of course, replace with the actual hex codes you need rather than the colour names above, and any valid property can be used, e.g. border, text-decoration etc.
Use :hover pseudo selector
element{
color: white;
background: blue;
}
element:hover{
color: blue;
background: white;
}
You can check these at Click Here
if you go here and add "Piept de pui la gratar" to your cart, there will be a popup.
I tried modifying the close button's CSS because I want it fully yellow (including hover and non-hover states), but it just doesn't seem to work.
I've tried setting the color and background-color. The background color seems to work, but I don't want to change it. Setting the color to yellow just doesn't seem to make it. Any help is appreciated.
CSS Code:-
a#thp-close-id {
color:yellow;
background-color: yellow;
}
Also tried:-
.thp-close {
color: yellow;
background-color: yellow;
}
I also tried flagging the color property as !important, but it didn't work.
The reason why it doesn't work, it's because you are trying to apply those styles to the wrong 'element', as the close button uses its pseudo classes, see screen:
So in order to achieve what you need, try writing this css instead:
.thp-close:before,
.thp-close:after {
background-color: #f4c001;
}
I have an 'a' tag that is a normal link to another webpage.
I want to disable the default link appearance unless the mouse cursor is hovering over the link, when the default normal link appearance should be restored.
This is what I have tried so far:
(HTML)
example
(CSS)
a {
color: #000;
text-decoration: none;
}
a:hover {
color: unset;
text-decoration: underline;
}
JS fiddle example of that code here
The problem is that during the mouse hover the link color remains black, and does not unset or restore to the original link blue. Is there a special CSS keyword for "original setting" or something like that?
The value for original setting you're looking for is called initial.
a:hover {
color: initial
}
However, that might make the link black. Which means it wouldn't work for you in this case. You can get around this another way though, through your a style. Use the inverse of :hover using the :not selector.
a:not(:hover){
color: #000;
text-decoration: none;
}
Hi, I'm Link.
The way it works is applying the style to your link, as long as it's not the hover effect. a alone would style the :hover too, which we don't want.
Or if that doesn't work in your environment, you could style the link with the default colors:
a { color: #000; text-decoration: none; }
a:hover {color: #0000EE; text-decoration: underline; }
Hi, I'm Link.
That should work everywhere, as it's a regular color change. However, do note that the default color might slightly vary browser to browser... the perk of this is that the color stays the same across all browsers, I guess.
The difference between the middle and last piece of code is that the middle one uses the default browser settings, while the last one pushes in your own blue.
I have a div wrapped in a <a> tag like this...
<a href='/'><span>Quiz</span>
and then my css stylesheet looks like this...
a:visited {
color: green;
}
But when the link is visited, it looks like this...
I have tried defining the border settings in the a css selector in various ways with no luck. Any ideas on how to fix this?
This is not an outline, probably there is already a border on, either your span or your a. Now, if the border doesn't have a specific color set, e.g.
border: 1px solid;
instead of
border: 1px solid black;
then it's color is defined by the color property. Which means that what is happening is normal.
Now, you have two options, either you find where is this border defined and remove it or add a color to it. Or you override it in some way like:
a:visited {
color: green;
border-color:transparent;
}
you may need !important on the border-color rule but that depends.
Use outline instead of border to fix this.
Thanks
i think it will be better if you look into the style section of the safari inspection. There are certain browser default styles which behave in a similar way. If you find any outline or border declaration, try to neutralize that declaration by declaring from your end border: 0; outline: none;
It will be of real help if you could share with us the code over fiddle or codepen.
Note: I was unable to recreate the scenario as you specified.
I'm trying to figure out how i can remove the border under the links at my website. It's both irritating and it messes up my design. So I'm asking here instead. I have been searching around Google, but I can only find "How to remove border around image links".
Can i use css to remove the borders? I have tried "border: solid 0px #000;"
But it did not work.
So if anyone could help me on this one I would really appreciate it.
If you're trying to remove the underline, add this to your css :
a {
text-decoration: none;
}
If you want to remove the underline of all the links, you can add:
a{
text-decoration:none;
}
Or if you want to remove the underline of a specified link, then you should create a css class like,
.style1{
text-decoration:none;
}
Then call this class name with the link like,
Link
It will only remove the underline of that link.