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
Related
Sorry if the title is kinda incomprehensible, hope you can get an idea of the problem from the description.
So This is the normal style of the links;
This is the color they get when page is reloaded (for a split second);
It's kinda annoying to see the deafult color for a split second when the page is reloaded. I don't know if it's common or not, but i couldn't find the solution on the web.
The only thing I did was to change style of visited links with this:
li {
color: #ffffff;
}
a:visited {
color: inherit
}
But I guess when the page is reloaded the css isn't applied yet(?)
Hope there's a solution I'm kinda pissed. >_< Thank you for any suggestion. 🙏
https://www.insure.report/en
I need to fix the Updates widget to have a top margin so it isn't covered by the header OR I need the widget to load on top of the header, not behind it.
Then I need to hide the 'Submit an idea' link.
I'm still new to CSS and the Submit link uses several classes so I don't know which to set to display none.
Any help or guidance is appreciated.
Without seeing your html and css it's hard to be absolutely positive but I gave the id frill in dev tools a property and value margin-top: 20px and that seems to solve your first question in dev tools. Since you are using bootstrap, in your custom CSS stylesheet you'll probably want to add:
#frill {
margin-top: 20px!important;
}
For the submit link you could give that link a class, like class="hide-link" in your html and then give that class a CSS rule of display: none; like:
.hide-link {
display: none!important;
}
I configured it according to https://help.frill.co/article/75-adding-the-widget
It's not really the right answer because what I was seeking was not done. But I removed the top elements instead.
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;
}
I am using Social Buttons for Bootstrap to add social buttons on my web site. The file is basically a CSS, which is using Font Awesome and has around 20+ classes defined for various social networks.
Buttons, defined with Bootstrap Social have hover and active effects.
What I want to do is disable hover/active effect, so the buttons would become static, i.e. without any hover/click functionality.
Ideally, I'd like to have some CSS class, say "btn-static", which would cancel style changes coming from hover/active effects.
Is this even possible?
I would like to avoid creating separate CSS class for every social network, or modifying original CSS file. Hoping to add custom class which could cancel hover/active events.
For example, here is the button defined:
<span class="btn btn-social btn-facebook">
<span class="fa fa-facebook"></span>Facebook
</span>
I have tried using:
.btn-static:active, .btn-static:hover { background-color: none; }
and
.btn-static:active, .btn-static:hover { background-color: inherit; }
But that just makes the button have transparent background. I want it to keep original color. Is it somehow possible to reference the original color in CSS?
UPDATE #1: JSFiddler is available
This is a hack:
.btn-static {
pointer-events: none;
}
According to Can I Use, it is well supported. Take a look at the known issues tab on that page, as this won't scale to many other uses.
Ideally, use a more specific selector. For example:
#IDofYourFooter .btn:active, #IDofYourFooter .btn:hover, #IDofYourFooter .btn:focus {
background-color: [whatever] !important;
}
If you genuinely cannot come up with a more specific selector, then use !important to override CSS that is inline or coming from a third-party source that appears after your styles:
.btn:active, .btn:hover, .btn:focus {
background-color: [whatever] !important;
}
See that I added a :focus selector in there. Also, using !important almost always creates maintenance issues down the road.
Please note that changing styles does not disable links, it just obfuscates them. Make sure these do not live in an <a href…>, though if you do that you have no reason to write these styles. If the hover styles are applied outside of an <a href…>, then the original source did a poor job or there is script clickability added.
Im trying to override the grey text of a disabled input and textarea. At the moment Im only really concerned with it working in Webkit and Mozilla. At the moment Im currently using every trick in the book that I know of:
input[#disabled=true], input[#disabled],
button[disabled]:active, button[disabled],
input[type="reset"][disabled]:active,
input[type="reset"][disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
select[disabled] > input[type="button"],
select[disabled] > input[type="button"]:active,
input[type="submit"][disabled]:active,
input[type="submit"][disabled],input[disabled="disabled"], input[disabled] {
color: black !important;
}
Sure it does change the colour if I change it to something else, however when I choose black it is still greyed out a bit.
Any ideas? I am using Ext JS if I can use that to manipulate it. Thanks.
input.button-control[disabled]
{
color: #cccccc !important;
}
Here button-control is a class on the input element, whose text is overriden to grey when the disabled attribute is set.
I hope this helps.
I would prefer to go the JavaScript way to achieve best browser compatibility. I would use the ExtJS [http://www.extjs.com/deploy/ext-1.1.1/docs/output/Ext.DomQuery.html][DomQuery] and insert the CSS rules by adding specific class or directly injecting them as style attribute values.