Can you have a look at my code and please tell me why the hover is not working, thanks!
<style>
#moreDiscussHome:hover{
background-color: #ffffff;
}
</style>
<a id="moreDiscussHome" style="color:#f1f7f8;background-color:#12a1b7;" href="">more discussions</a>
Well, as soon as display: none; is applied, you are no longer hovering the element because it is not there, so it will basically flicker constantly or do nothing.
Try opacity* instead perhaps:
#moreDiscussHome:hover {
opcaity: 0;
}
Note that the element still retains it's space in the layout with this, which may not be what you want... but I'm honestly not sure what you're trying to achieve with this.
Side note: There's no reason not to move those other inline styles to a stylesheet.
This doesn't work: #moreDiscussHome:hover{ background-color: #ffffff; }
EDIT: I strongly urge you to move all inline styles to a CSS file. If for no other reason, to avoid some of the issues you already seem to be having with trying to apply background colors. A shortcut might seem easier at the time, but as the saying goes: "Shortcuts make for long delays". (In other words, don't do it)
* visibility:hidden will respond to :hover the same as display:none, so it won't work either. Thanks to thirtydot for the tip.
Related
I created a global CSS file. It is working perfectly, except that I am unable to set margins.
For Example CSS:
.update_date {
font-size: small;
text-align: right;
margin: 0;
}
This is a CSS style for class update_date. When I use it, except margin, everything is applied. It's the same case with every other class. None of these classes are overridden in any other place.
Can someone provide a workaround on how I can set margins globally.
Environment:
Angular 10/11
Try using
.update_date {
font-size: small;
text-align: right;
margin: 0 !important;
}
this happens because that style is getting overridden by another
You should avoid "!important" if you can. It can cause unintended styling issues later down the line - see below.
My suggestion: In your browser, use your "Inspect Element" (Ctrl + Shift + I) tool to figure out where in the DOM Tree your styling is coming up and what is overriding it. This will help identify if !Important is truly the only solution you can use.
Inspect Element Tool Picture Example
Hard to say with your code snippet what is actually happening and being this post is 1.5 years old, you may already know this info. But I didn't see any other responses, so just wanted to raise awareness to the "!important" property.
More about !Important
From W3 Schools (I am sure you can find this elsewhere as well): https://www.w3schools.com/css/css_important.asp
"Tip: It is good to know about the !important rule, you might see it in some CSS source code. However, do not use it unless you absolutely have to."
The following does not work for IE11 for me:
input::-ms-clear, input::-ms-reveal {
display: none;
}
Side-issue, probably not relevant: Whether I have it in or not I get the same thing, which I'm guessing is the way this works: the first time you go into password field you get the show/hide icon, change fields, go back in and the icon disappears.
any ideas how to get rid of the reveal because I have to remove it?
thanks.
adding !important to the rule fixed it. Something, somewhere must have overridden this, but there are no other -ms* entries in the imported style sheets and html (however this is tricky as it uses the truly awful GWT which seems to obfuscate and hide everything)....
input[type=text]::-ms-clear {
color: red; /* This sets the cross color as red. */
}
Only CSS please!
Basically I want to apply some styles to everything on the page (or almost everything) except for a certain textarea when that certain textarea is :focused.
So, when I focus on the textarea, everything else gets an opacity: 0 or something like that.
I tried fiddling with :not() but I couldn't get it on quite work.
I also might want to expand this to say: apply some styles to everything on the page (or almost everything) except for a certain div when a certain textarea is :focused.
This is kinda an overcomplicated example I was trying to learn from:
http://tympanus.net/codrops/2012/01/09/filter-functionality-with-css3/
There is no way to ascend the DOM hierarchy using CSS, so what you'd want to do is make sure that the relevant textarea is a sibling of the container for anything that you want to have fade out. At that point you should be able to do something like:
textarea:focus ~ section.toFade {
opacity: 0.1;
}
It's an ugly fragile solution (bound by the limitations of CSS), so hopefully this is just an academic exercise.
The closest I could figure was:
*:not(textarea) {
color:red !important;
}
As *:not(textarea:focus) seems to break it.
So, I have this animation that I want to run in the background of my website.
http://www.theartificialasylum.com/index3.html
I want to layer some divs over that animation containing images and texts etc. I have tried using z-index in the CSS file and different variations of uses of opacity to no avail.
Can anyone see where I am going wrong? this is the best I seem to be able to achieve: http://www.theartificialasylum.com/adex.html
Using Chrome's developer tools, I added some text to the 102 div, gave it a class of "lawl", and used only this stylesheet and was able to accomplish what it sounds like you wanted:
body{
background-color: #000000;
color: #fff;
}
#flashContent {
position:absolute;
top: 0;
left: 0;
}
.lawl {
background: #023;
opacity: .5;
}
I'm not sure what the problem was. Maybe it's your strict doctype. (I only use transitional myself.) Maybe it's because you were applying too many things to the html tag.
I do recommend cleaning up your code a bit, using more semantic IDs, putting test text in your divs, and paring it down so that you only test a few variables/lines of code at a time to achieve what you want.
Also, saving damn IE opacity fixes for last until after you have everything else done.
I am not sure what is going on here but the rollover is not working correctly and I can't seem to figure it out.
I am using very basic and simple css:
open{visibility:hidden;}
open:hover{visibility:visible;}
http://www.ubhape2.com/messages/files/chameleon/ is the page i am working on
Please forgive the god awful code. I am using it as a simple and quick method. Just need the roll over to work and I am good.
You can use the opacity property:
.open{opacity:0;}
.open:hover{opacity:1;}
The problem is that you can't hover over a hidden element (see Why isn't CSS visibility working?).
The solution posted there is also a good alternative for this issue. There are lots of other ways to do it though, such as a div with an image in the background, like:
<style>
div.open { background: none; width: 137px; height: 49px; }
div.open:hover { background:url('images/chameleon_10.gif'); }
</style>
<div class="open"></div>
Or if you need to use an image, you can use image sprites (http://www.alistapart.com/articles/sprites)
See basic jsfiddle.
Try below code, should work fine
a.open{visibility:hidden;}
a.open:hover{visibility:visible;}
<a class="open" href="">Open</a>