:hover links not working - css

I am developing a website from scratch and I am having some trouble with my anchor tags.
I use the following css class in order to change the nav links state:
.nav-color:hover a{
color: #e67d20;
}
But insted of changing the link which the mouse is over, it changes all three nav links together. I hope you can help me, this never happened to me before!
Here is the sample code: http://jsfiddle.net/yYnGK/
Thanks!

Try like this:
.nav-color a:hover{
color: #e67d20;
}
DEMO
Visit Pseudo Classes CSS Selctors

Related

CSS/Wordpress: Can't apply an underline to a link which id contains a given string

I have multiple landing page that contain the same element that I want to apply an underline to. I'm using Wordpress custom JS/CSS plugin to add the CSS for each page but I want to make easier by only matching a part of the ID name instead of doing it for each page individually.
This is the code for each LP:
#hi-call-button1-2{
text-decoration: underline;
}
And this the code I'm trying to make to work to no avail:
div[id*="hi-call-button1"] {
text-decoration: underline;
}
Here is what the code of an element looks like:
<div id="hi-call-button1-3" class="brz-css-uiyth brz-wrapper">
<div class="brz-d-xs-flex brz-css-qllru">
<div class="brz-rich-text brz-css-tuigc" data-custom-id="vgqcolqiepoliqsomiyljswpbpwviqeqybcq">
<p class="brz-fs-sm-17 brz-lh-lg-1_9 brz-lh-sm-im-1_6 brz-lh-xs-im-1_6 brz-ls-lg-0 brz-ls-sm-im-0 brz-ls-xs-im-0 brz-ff-overpass brz-ft-google brz-fw-lg-400 brz-fw-sm-im-400 brz-fw-xs-im-400 brz-text-lg-justify brz-text-xs-center brz-text-sm-right brz-fs-lg-24 brz-fs-xs-im-23">+1 (800) 123-4567</p>
</div>
</div>
</div>
The problem is that it works in JsFiddle here but not in my pages. I tried adding !important with no success. I don't know how to troubleshoot the problem. Any help would be appreciated.
EDIT: Here is a test page that replicate the problem https://1on1finance.com/test/
The reason it's not working is that is this CSS http://prntscr.com/uiwac5
html body div[id^="hi-call-button1"] a.link--external {
text-decoration: underline !important;
}
Use the above CSS this will override the CSS in your website.
Please clear your autoptimize cache to reflect the CSS changes.
I see you already have
you may try to add this to: appearance/customize
a[href]{
text-decoration: underline !important;
}
if it doesn't work, try adding this :
.brz .brz-rich-text .link--anchor, .brz .brz-rich-text .link--external, .brz .brz-rich-text .link--popup {
text-decoration: underline !important;
}
PS: it is not a good practice to use the (!important flag)... as it will bother any other developer who may work on the same project in the future...
So if the above code worked fine, try removing the (!important flag) and test if it works... if it doesn't, then you have no other option...
try this css
div[id^="hi-call-button1"] .link--external {
text-decoration: underline ;
}
You will need to overwrite the rules already being applied. Remember if you are using Autoptimize to 'Aggregate CSS files' and/or 'Also aggregate inline CSS?' it might be effecting the load order of rules so you can turn these options off and reload your cache to check.
.brz div[id^="hi-call-button1"] .brz-rich-text .link--external {
text-decoration: underline;
}
By using the two-character operator “^=” we can target the div element that starts with val "hi-call-button1"
Im not sure if this is resolved or not. I managed to get it working on your test page like this
div[id^="hi-call-button1"] a {
text-decoration: underline !important;
}

How to add a:hover color to AMP dropdown menu

I just switched my site over to AMP using the free theme. I added the drop-down menu CSS code that scrolls and works well but I cannot figure out how to add the a:hover background color #cc3333 or isolate which element it should point to. Any suggestions would be appreciated.
https://partyfavorz.com
you can add this code to your css.
.amp-menu>li a:hover{
background: #cc3333;
}

Custom CSS in wordpress theme

I'm using the Directory+ theme from ait themes on wordpress. I'm very bad at css and have only just started learning the basics.
There is a custom css section built into the theme to overwrite little bits and pieces. I have plenty in there and it's all working perfectly fine. However I'm struggling with changing something.
Why isn't this the correct way to change the colour? Can you please tell me how to write it the correct way and explain why this isn't working.
#elm-search-form-5-main a, #elm-search-form-5-main a:hover {
color: #ffffff;
}
Much appreciated.
This is because you use same color for default and hovered link
Try to do it like this
This css for default link
#elm-search-form-5-main a{
color: #ffffff;
}
And this css for hovered link
#elm-search-form-5-main a:hover {
color: #000000;
}
Look at this docs
your code is ok. Have you tested it in your web-browser developer tools to see if your element elm-search-form-5-main achange the color?

What is causing this nav bar to look different?

I am working on a Drupal 6 site that some CSS issues. I have used firebug to try and determine what is causing it, but I am at a loss.
Messed up nav bar
Correct nav bar
The page has a custom app that is loaded when you click on the link. I corrected another problem in the custom app stylesheet a couple of weeks ago by using firebug. I have tried modifying the dimensions in the theme stylesheet and the custom app stylesheet with no luck. I appreciate any suggestions.
change your #content css width to : width:657px;
And play with the margin to get it the same way
Check your sidebar too it's definitively different, maybe you wont have to modify the content if you modify the sidebar
you have two time the class #nav remove the one without the background-image
Resize the height of your class #title : #title{height: 34px;}
But one more time you have to class #title, so remove the one that as a bigger heigth thant 34px
Remove the color here : #nav a:link { text-decoration: none;}
5.You need to add this class to the link that is active : #nav a.active {background: url("/themes/a3_atlantis/active_overlay.png") repeat-x scroll 0 0 transparent;color: #0B486B;height: 24px;}
Lots of modification ;)
OR juste remove the duplicates classes and it will help a lot ! !

Hover effect won't trigger on a link styled in CSS

I have a simple page in which I'm trying to style an a link. I can style the normal state fine, but the hover state never triggers.
The relevant portion of my stylesheet is:
a.faqquestion {
color: orange;
}
a.faqquestion:hover {
text-decoration: underline;
cursor: hand;
}
and my code looks like this:
<a onClick="toggleMe('FAQ1')" class="faqquestion">1. How many licenses do I need?</a>
Can someone see what I'm doing wrong? The full page is available at:
http://www.haast.ca/Pages/Products/HAAST/FAQ.htm
and FAQ's 1 and 2 are styled with the class "faqquestion".
Thanks,
Michelle
A few things:
cursor should be pointer not hand
add the faqquestion class to your links
your links should have a target so just add a href="/wherever they should go" or href="#"
Internet Explorer is ignoring the a.faqquestion:hover production because your cursor definition is invalid.
Changing cursor: hand; to cursor: pointer; fixes the problem.
The page works fine on my browser, you just forgot to add the class faqquestion to the other links
It works:
http://jsfiddle.net/Steve_Wellens/tjW6Q/
So, I'm guessing your CSS is in a separate file that's not being loaded.
IT is your just not noticing it because you have nothing changed in the second css, because the HTML tahe < a Come with underline. and try spacing out the different css variable's, like
a .faqquestion:hove, and it will probably work if you remove the a, because your calling the same tag with two different css tags cause you call the < a with faqquestion

Resources