What can prevent the CSS :hover pseudo class from getting triggered, either with CSS or JavaScript?
I'm trying to debug a really tricky problem in a third party's custom calendar control. The client wants to highlight the dates when the user hovers over them--pretty standard stuff. But something is stubbornly preventing the :hover class from working as expected.
I'm able to target the date cells with a selector and manipulate the background-color without any issues. Adding the :hover pseudo class to that selector doesn't work, though.
Unfortunately I can't post any code, because this is a private app that requires an account to use. There's honestly so much spagetti that I wouldn't even know what to include... The control is built in pure JS, no jQuery here, no siree. Several hundred lines of JS, plus hundreds of lines of CSS ... Not sure what's wrong with using the jQuery calendar control.
Is there a known set of things that can break :hover? Could it be an event propagation issue, caused by returning false from an onhover eventhandler or something?
Any other suggestions for debugging this problem? Using the browser tools isn't very effective, because the :hover rules don't get triggered unless I'm hovering. Catch 22 there.
EDIT: This answer seems like a possible culprit. They're definitely using some absolute positioning in the mix...
EDIT 2: Manually applying the :hover state with Chrome's developer tools works, confirming that my selector isn't the issue. Something is preventing the :hover state from being triggered. The calendar control is implemented as an HTML table, with each week in a row and each date in a cell. It does seem like a layering issue, but adding a high z-index to the cells doesn't do anything.
Chrome's "Developer Tools" allows you to toggle an element's state. Perhaps you could try that and see if you gain more insight into the problem you are experiencing?
It tends to have to do with the layering of the elements. Typically this can be fixed by re-layering your HTML such that the anchor ends up on top, or setting it to position: relative.
you might have !important on the unhover which would block the hover.
Related
I just started to work in an existent WordPress project in order to fix some issues, so I am firstly learning about this project. Now, I want to know exactly which javascript code is unexpectedly changing an element's style at the HTML code. Maybe some plugin... I need to find it out!
In a similar question someone has answeared that you can do that in Firefox by right clicking on the element in "HTML panel", than selecting the option "Break on Attribute Change". But I can't see this option, maybe it's an outdated feature...
So, how can I know which javascript is changing the element's style??
In Chrome, right-click on the element in the inspector document and select Break on > attribute modifications.
I would like to use the following CSS slider in my project
http://jsfiddle.net/63w9jnqq/1/
It does not using any JavaScript or jQuery. When I clicking on the link from any slide other than the 'slide 5' takes me back to the first 'slide 5' instead of opening a new tab. It is CSS heavy code, I have no idea about how to fix it. I have no problem to use extra jQuery or JavaScript to fix this issue.
I tried the following jQuery to stop click action, it does not working
$(document).ready(function(){
$(".slide-gfx a").click(function(event){
event.preventDefault();
});
});
:focus state
The cause of this issue is down to the fact that the slideshow is relying on the :focus handling of CSS to remember state. This is a very temporary handler, which is lost whenever a new element is focused. I built the slideshow more for non-interactive elements, just to demo visual work — this works fine with :focus
The slideshow reverts back to slide 5 (or the end slide) when none of the slides are focused. This was fine for my needs, but obviously not for your use-case. This is occurring when you focus on your <a href="" /> elements.
Limitations of css
Unfortunately there is no way to match (in current CSS) up to a parent from a focused child — at least not that I am aware of. This would solve the issue with pure CSS. You can obviously match downwards (i.e. parent:focus .child), but that doesn't help. You can employ the The checkbox/radio hack which I did consider at the time, or you can switch to using a different way of "remembering state".
:target state
The CSS in the original demo was already tailored to also support :target as an alternative, so you can patch current functionality with a small bit of JS. I wouldn't want to rely on this across older browsers however — but then again, older browsers would probably find it hard to cope with this system anyway.
Snippet and fiddle
This patch listens for the :focus event, and sets the fragment in the URL to match the id of the slide. This means that the CSS then switches to listening to the :target selectors instead, which should keep the right slide selected.
http://jsfiddle.net/63w9jnqq/4/
$('.slide').on('focus',function(e){
window.location.hash = $(this).attr('id');
});
Recommendation
Going forward, I'd suggest perhaps looking at more recent methods for implementing CSS. As I'm sure there are a lot of new improvements that could be used to extend the system — something I haven't had time for of late. There may even be handling to integrate touch-style events to make things more naturally mobile friendly, although perhaps that is just wishful thinking.
At the end of the day, even though there is a lot of CSS in this solution, it is best to try and understand every part of the code you use in your projects — as that helps to debug situations you might find yourself in. This issue is mentioned in the original post here, and the solution using :target is employed to handle the "sub nav" links:
Implement a CSS-only slideshow / carousel with next and previous buttons?
For those, who failed to spot it before, hoisted here:
NO JS frameworks please. Even little ones.
And let me add: no libraries as well, for those who want to propose jQuery saying it's a library, not a framework. :P
I have list items with icons, via:
li:after {
content: " : " url(ncheck.png) url(ntrash.png);
}
Question: upon clicking the icons I want to run JS code (different for trash and check). How to do so with pure CSS / native JS?
Intent: I'm wondering whether content inserted via ::after can be made actionable.
I'm working on making this happen via img tags (image button technique), however wanted to know, whether I missed something, and whether this can be done using CSS ::after.
PS. Browser support: FF is a must, Chrome is a nicety.
Updated - why that content should NOT be actionable
In the end I decided against using ::after for actionable content. Reasons:
CSS for actionable content is meh
Content added with ::after is added AFTER element, but before next element. So, adding span and making span actionable requires further tweaking and arm-twisting in order to move the span from it's actual position. Too weird, too hacky to really be worthwhile.
There's absolutely lovely piece of why neither DIVs nor SPANs are BUTTONs.
So, I went with adding input type="image" instead.
Thanks to TJCrowder and Harry for their time and help here.
You cannot detect clicks on pseudo-elements at all.
So if you wanted to have the user seem to be clicking the pseudo-elements, you'd have to be detecting clicks on whatever's underneath them instead. Depending on your structure, that mean adding elements and so negating the benefit of the pseudo-elements, but it depends on your reasons for using pseudo-elements in the first place.
It could be that your structure already has something there for you to detect clicks on. If so, you could then figure out which "button" was clicked by comparing the click's coordinates with those of the element they're attached to. But again, it depends on your structure.
I'm troubleshooting a scrolling gallery with standard left and right navigation arrows. I'm wondering if there is a way to track when a specific div or class tag is modified upon loading the webpage. My problem is that
<class="next browse right disabled">
is being applied to my right arrow when it should be
<class="next browse right">
It is a heavily modified jquery-tools scrolling gallery that someone else wrote and I'm just not sure how to approach this. Any advice/help is appreciated!
Jquery does not have any baked in event that can help you intercept addition/ removal of a class to div. You can at anytime use jQuery hasClass to see whether a particular class is applied or not.
$('#mySelector').hasClass('right') //returns a boolean
You can take advantage of chrome dev tools breakpoint debugging if you are performing these actions via javascript.
Finally, if you insist on capturing class change, then you must raise your own event. Please see this question:
jQuery - Fire event if CSS class changed
I'm not sure if this works:
$('next.browse.right.disabled').removeClass('disabled');
or
$('next.browse.right').removeAttr('disabled');
Maybe DOM Breakpoints in the Chrome devtools would help?
I would like to find an interaction in Javascript that only a human can do, but javascript can track it if the user has done it.
Something like an only readable event but not writable.
You could use mouse-driven CSS pseudoclasses; I don't believe they can be triggered using Javascript: see Trigger css hover with JS for a little more information.
If you set some style aspect on the hover, for example, you might be able to detect that using javascript.
I don't know how well this approach would work cross-browser however, and you might need to use a visible element.
see also Activate an element's :active CSS pseudo-class using Javascript?