I am aware there are other similar topics on this, but I was wondering how to make my situation work. I have not been able to make it work with available information so far.
I am trying to modify the background color of a Text button when the mouse hovers.
If I change my backgroundColor style inline of the button, it changes the appropriate area entirely. It seems there are no way to add an :hover functionality inline (I am using TS, shows up as an error. Even though it compiles, it has no effect).
If I use a SCSS module, I can change again the whole background color. But if I change the same property with the :hover functionality, it only affects the text part (see screenshot).
I've tried targeting more specifically the ant-btn-text, but to no effect still.
Would someone have an idea? I would like to avoid creating a state variable for this.
Edit: added portion of code and CSS as requested in comment
AntD classes generally override your own css stying. You can use !important to override that.
Ok so I found it (only post it now as it was getting late local time).
So compared to my original post, the & parent selector was necessary, and also adding !important made the trick.
So in my case, having:
.updateButton {
&:hover:{
background-color: red !important;
}
}
overrode the default styling.
Thank you!
Related
I'm trying to refine the Breeze Dark theme for konsole using custom CSS, but I cannot figure out the selector which gets picked when the konsole content changes and the tab get becomes highlighted (if you know what I mean; it merely means that the unselected tab text color gets changed when the content of the shell changes). Not hover though, as hovering works the over way.
Reading the official documentation doesn't clarify me (I suppose I'm using it wrong, but anyway). Does anyone know the name of the property/selector ?
Also, it would be nice if my custom CSS would be merged with teh default one, overriding only the things that I change, and leaving others intact. I expected this to be the default behavior, but seems like I'm wrong.
Here are some official examples for customizing QTabWidget.
Namely, you would need ::tab subcontrol and :selected pseudo state in your stylesheet. For example:
QTabBar::tab:selected {background: red;}
I am fiddling with the looks of a page from our web application. I need to make lots of small changes quickly to judge the effect, and the developer tools give me the functionality I need, as I'm editing the CSS directly in the element inspector.
However, there is a table on this page, which was created by some JavaScript library. The library inserts style="width:1024px" directly in the <table> tag. I need to change this width to make it 100% of the parent width, but it doesn't work.
Deleting the style attribute from the HTML without reloading the page does not change the width. Setting a new width in the stylesheet does not work because the inline CSS supersedes it. Reloading the page overwrites my changes made in the element inspector.
I cannot get into the code and change the setting used for the library (I assume it allows the developer to define a constant width and does not do it by itself). What options do I have to see the table at the width I need without reprogramming the whole thing?
If you really can't remove the inline style you can override it adding the !important keyword on your css style.
like that
table {
width: 100% !important;
}
I found out that it indeed works when I change the inline tag directly from style="width:1024px" to style="width:100%".
My mistake had been to first delete the complete inline tag, then write it back again with the new value. It seemed to not "get it" that there has been a change.
i have an issue where im using css to make a div appear circular on screen but it only works if the background image property is set first
normally that wouldnt be an issue if the image wouldnt need to be dynamicly inserted using PHP code
i created 3 jsfiddles to document my problem
https://jsfiddle.net/2wr2wajw/
No issue, background set first
https://jsfiddle.net/zvq3r0pd/
Issue,background doesnt get resized properly
link3 jsfiddle.net/x8g05uph/
Same issue as above, i would have expected the style code to be executed first
SO, whats the issue and whats the solution? thank you
EDIT
Found out adding the additional styles in the html code works, but thats not very nice and unnecessary to rewrite css code for everyone tag
thats what class selectors are for right?
link4 jsfiddle.net/q7sdwbfk/
not nice
The reason your code is not showing up properly in each scenario is because you are using the background shorthand property, which in turn is overwriting previously set values.
For instance, in example 2, you are setting the background-size prior to setting the background shorthand. By setting the background shorthand, you are overwriting the background-size property.
If you don't want to load them in order so that they don't get overwritten, don't make use of the shorthand background. Instead, utilize background-image, background-repeat, etc. This sets each property individually and will not cause anything to be overwritten, unless the property is called explicitly again.
Here is the updated fiddle for your example 2, utilizing individual properties instead of shorthand.
I'm doing something wrong here, and will appreciate advice on correcting it.
Using the cursor attribute in CSS, with an image url, works but I cannot seem to get it working with anything other than the default context. For example, when I hover over an anchor, the cursor converts to the general OS pointer cursor.
I want to be able to define a different image url for each context. Is this possible?
Thanks in advance.
P.S. I'm using Chrome for testing, but cross-browser is needed as well. I also already know that Opera does not support image cursors.
You need to override the default browser cursor, by targeting the a element
Demo
div, div a:hover {
cursor: url(http://investor.dragonwaveinc.com/common/images/briefcase-addv2.gif), auto;
}
So by using div a:hover, we will override the default pointer cursor on hover
That issue is because when you're hovering over the image, you're actually hovering over the hyper link at the same time. Whose cursor property is set to pointer. And it overrides all other properties set to the other.
So try to edit the class of that hyperlink too, to make sure it works just for that image and all other hyperlinks are having the default cursor.
And yeah, CSS is cross-browser so you won't find any errors.
You can check the browser's developer tools:
However, if you want future support then you can try to look in the Developers tools (F12) and check which property is being applied to which element and it will surely tell you the line too. So you can check why some CSS gets applied and why some CSS properties gets override in CSS.
I'm trying to get a few elements on my printing stylesheet to "show" at print/printpreview time and this isn't working. If I want to 'hide' elements, it works just fine.
I've tried setting the element's display=block from display=none and this isn't working. Also tried combinations thereof with using visibility=visible from visibility=hidden; no luck.
I thought I could work around this by doing some nasty hacking such as having my element at left= -3000px to left=20px; that change doesn't occur either at print time.
Another ugly hack of mine that isn't working is having the element's font color be the same as the background color in my main stylesheet, then changing it to black at print time; doesn't work either.
However, one thing that does consistently work is hiding any element at print time; so my print.css sheet does get picked up and applied.
In summary, so far, showing an element, changing its font color or position does not get picked up at print time; neither does centering an already visible element with text-align-center; by the way.
Also worth noting: The results are consistent in between IE9 and Chrome.
Any thoughts?
Check to see that any inline styles are not conflicting with your main css and your print styles.
An ugly workaround may be to add the !important tag to the print.css style.
Example:
.element {
display: block !important;
}