I want the "tr" that's currently hovered over to change color, and then change back when the mouse is no longer over it. Is this possible using pure CSS, or is javascript the only solution? (I currently have a javascript solution, so I don't need examples of that)
Thanks!
Yes, this is possible in CSS. The example below will have a red background normally, and a green background when the row is hovered over.
tr td { background: #f00; }
tr:hover td { background: #0f0; }
However, it should be noted that this will not work in IE6, as it does not understand the ":hover" pseudo class on any elements other than <a>.
I believe that javascript is the only solution that will provide cross-browser support.
I think you can use :hover css attribute.
Related
I want to set background color on flexbox and tried as follow.
Class definition on app:
<App id="app" class="weight-protocol"></App>
on FlexBox:
<FlexBox
height="20%"
width="100%"
alignItems="Start"
class="calendar-header-bg"
justifyContent="Center">
in the css file:
.weight-protocol .calendar-header-bg {
background-color: #007DB2;
}
The custom background color is not going to apply at all as you can see:
Look at the code inspector, the custom css class stays at the beginning calendar-header-bg instead at last.
Did you try without .weight-protocol ?
.calendar-header-bg {
background-color: #007DB2;
}
If not work you can use !important tag:
.calendar-header-bg {
background-color: #007DB2 !important;
}
You can also try use only background tag instead background-color:
.calendar-header-bg {
background: #007DB2 !important;
}
I hope this helps...
Good Luck!
Shouldn't FlexBox have some css to do what you are trying to achieve? use inspector and watch for the div that cointains the flexbox.
Can you be more specific?
I'm guessing the problem is specificity also known as importance of selectors. This means that the selector you're using (class nested in class) has little weight overall, and it very likely overwritten by a different, heavier selector from within the library you're using. For instance the library might be targeting a class within a class within an id or something similar.
My advice is to see the applied styles within the dev tools, see what's overwriting your styles and then decide if you'll make your selector stronger( by making it more specific) or just add !important after your background-color declaration.
I'm looking for a way, using only modern css, to select all elements which have a background-image which utilizes any sort of gradient and then overwrite that value with 'none'. Essentially, I need to wipe out all background gradients. This is what I have so far but it doesn't seem to work:
*[background-image*="gradient"]{
background-image: none !important;
}
I'm starting to think that attempting something like this is not sane, but I'd like to know for sure. Is this even possible? If so, what am I doing wrong?
You cannot solve this problem using HTML and CSS.
You could use Javascript to check the background-image of every element in the DOM. With a huge DOM this can become slow, but seems like you have no other choice.
How about this method. you only have to add the class gradient for all those elements which are using gradient effect. I understand its a bit of work but it will solve your problem.
*[class*='gradient'] {
background-image: none;
}
I am using Icomoon to create custom font icons, i have a situation where to icons need to be in the same span such as:
<span class="glyph2" aria-hidden="false" data-icon=" "></span>
But they both need to be different colors. Is it possible at all to do this?
And here's the JSFIDDLE containing all the code, but i cant seem to get the custom fonts working in jsfiddle.
Any Help Greatly appreciated.
I don't believe this is possible using only the data-icon attribute.
You could use IcoMoon's icon- classes instead and use the before CSS pseudo selector on one, and the after selector on the second.
icon1:before {
content: "A";
color:red;
}
.icon2:after {
color: blue;
content: "B";
}
I have demonstrated this in a Fiddle.
I haven't been able to demonstrate that in the fiddle, but it looks like it can work.
IcoMoon's are styling in an :before pseudo selector. Acordingly to css the first-letter pseudo-selector should work on the generated content, and so including the :before data.
So, including
.glyph2:first-letter {background-color: blue; color:white}
You should be able to give this appearance to the first icon (generated in
a :before pseudo element with 2 custom chars).
It worked for me in local, but I couldn't get it to work in the fiddle.
I would like to add some right-positioned borders to my menu.
But the ones that I can use by default are not working for me. Can anyone recommend where to get a bit better looking borders, and how i add them in the css?
the css style you need :
#mymenu
{
border-right:solid 50px red;
}
You could try using jQuery (its more shape than actual border)
There's also a set of jQuery plugins to use on top of that.
Finally, there are some nice and easy css3 border properties that you could use.
I hope this helps.
I have a DIV square containing the word "Next". I would like to have the DIV background color change when I hover over it and have it take me to a link when I click on it. Can I do this without using Javascript? I don't just want to use a link as I guess for that then it would only work if I go above "next".
Thank you very much for advance helping.
Inevitably we have to ask: why not make it a hyperlink? If it quacks like a duck and looks like a duck, it should really be a duck.
You can handle the hovering effect with a simple :hover rule in your stylesheet (e.g., div.whatever:hover { color: red; }), but you can't instill an element with functionality like going to a new page without the use of JavaScript.
In HTML4(and to the best of my knowledge) HTML5 you can't do this. I heard they are planning on doing it in XHTML2 but that's not out yet.
You could simply use the <a> element like a <div> just give it a class, for example NextLink and then you can do things in CSS to make it look and act like a div:
.NextLink {
display:block;
}
.NextLink:hover {
background-color:red;
}
You can achieve this by having a hyperlink within the DIV with display:block:
<style>
#next:hover { background-color:red; }
#next a { display:block; }
</style>
<div id="next">
Next
</div>
Yeah, you can't really do that without javascript--or at least it wouldn't be worth trying, in my opinion. The best approach would be to style the a tag. Something like this:
a {padding:10px;border:solid 1px #000;}
a:HOVER {background-color:yellow;}