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.
Related
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!
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 want to completely reset a button's inherited CSS so it behaves exactly like any other inline-block element. However, I've run into a problem where the text of a button is forever stuck vertically-centered.
In the fiddle (and screenshot) below, the button and div have the exact same styles according to the Chrome Developer Console, yet the button's text is vertically-centered, while the div's is not:
http://jsfiddle.net/rgthree/vT3a7/
Anyone know of the property or selector that will completely reset a button, specifically including its label position?
Answer
There's no way in any browser other than Chrome ~25. I reached out to the Chromium project about the it not working in Chrome 27 (see the #winterblood answer & comments). They said this:
The issue is that we now use margin:auto on the anonymous block inside the button to do the centering inside the button in order to get safe-centering. So, unfortunately, there's no way to style it from CSS. That you were able to control this behavior before was really implementation detail leaking out.
So, the true answer is that you cannot style this in any browser, except for Chrome ~25 where -webkit-box-align was inadvertently exposed to, as #winterblood answered.
For webkit you need to override -webkit-box-align with a value of baseline or start.
I have had no luck implementing this in Firefox yet (from a very brief look at it).
What CSS property should I change at this page to disable transparency of a share iframe which appears when Like button is clicked?
When you hover on that Facebook box after clicking Like button, it becomes partially transparent and if you move your cursor away from it, it becomes solid white. I want it to be completely opaque all the time.
Well, I see no transparency on that box, only for the fade-in effect when it opens, but once it's fully opened it's not transparent.
To answer your question, you can see for yourself using firebug (firefox) or the development tools (chrome/safari) which css rules apply to what element.
From what I've seen now, you can use the use these: fb_edge_comment_widget fb_iframe_widget which are the classes of the span containing the iframe, or you can use the iframe itself.
The thing is though, is that you should not hack that. Why? Since then you'll have to always check for updates facebook are making, changes that they do not update you about (API changes they update on the blog), if you fail to be aware of these changes it can "break" your code/style.
I was also having the exact same problem.
I am using an AddThis widget set, and I don't know if this was the case for you or not (it looks like you may have chosen a different solution as I can't see the Like button on your site).
I ended up using
.addthis_button_facebook_like {
opacity:1 !important;
}
but you would use whatever selector that wrapped your like button. if using the standard embed from Facebook, it would probably be
.fb-like {
opacity:1 !important;
}
Someone else was having a similar problem with a Send button, which got me on the right track.
See it working like it ought to here. I'm sure it had something to do with some conflict from other styles, or possibly AddThis, but it's working now!
I have a site where the background-image jumps up on hover state and I can't for the life of me find the specific css that does this.
I'm able to get to the "offending" link and give it a border and change the padding and margin. The problem is that firebug and chrome inspect does not show me what happens on the hover state.
So I want a way to see what additions to the normal css state happens on :hover.
Any pointers?
(P.S. IE 8 doesn't have this issue - ie no jumping of background image)
Try using the Inspect function in FireBug to focus in on the element in question. It will show you all related CSS, including any CSS that is related to :hover. You can also see in this way what changes happen to the elements CSS (and any other DOM attribute) when you hover your mouse.
In case the changes are coming from some JavaScript, try out the Visual Event bookmarklet. Activating it on the page will let you see all events that are tied to the element in question.