I've placed an arrow as an :after pseudo-element of a clickable tile. It creates a blind spot that is not clickable despite setting the height/width to 0.
Code here: http://cdpn.io/vpjCg
To see the issue, roll cursor over the tiled link, then over the character in the bottom-right corner.
Is there a CSS attribute or another solution to set the :after element as invisible to the mouse cursor so that the whole area is clickable?
Pseudo elements belong to their parents - if their parent is clickable (button,a) then so will the pseudo element. Likewise with DOM elements, if a DOM element has a click event listener bound, it will be fired when you click directly on the DOM element, or on it's pseudo elements.
EDIT
In addition to my answer, you can make your clicks go "through" an element to hit underlying elements using the CSS property pointer-events and setting the value to none. Works in every modern browser (IE9 and up) https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
Related
How to inspect an element that only appears while I'm hovering another element? As soon as I hover out, the element disappears.
I'm not too sure if the hover effect is done with a CSS class or javascript though.
Its depend on which browser you are using. there is option to select the hover state.
Chrome as a Example:
I have a HTML element (position:absolute) positioned over my canvas/stage (createjs). For some reason the element is not visible.
The HTML element contains some buttons, so if i click in the area the buttons are in the suddenly become visible.
Is there a trick to having HTML elements on top of the canvas/stage?
Update: This only occurs on mobile.On desktop version things are layered and properly visible.
I think you can use the z-index css property.
I am trying to create an element with either :before or :after and position it at the bottom of its parent, halfway out of the element, to hide the box shadow there. This seems to work, except for IE.
Demonstration: http://jsfiddle.net/XV6pT/
The white border from :before should overlay the bottom border and its box-shadow. However, in Internet Explorer, the parts of the element below the bottom boundary of the button are not displayed.
There is no filter or similar which would set something to hidden (according to How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?). The CSS is copied as-is.
The general aim (maybe someone has a better idea) is, that below the button, there is a dropdown navigation, that should look like the dropdown and the button are "one part", so there should not be any border or box shadow between the button and the dropdown.
It seems that the problem occurs in IE9 and IE10. Switching from absolute to relative positioning also didn't help.
Any hints?
Take a look at this: Creating a CSS3 box-shadow on all sides but one
It involves a bit more html, but IE and pseudo-elements can drive you nuts. That answer also includes a shadow for the menu "baseline" but without deeply looking into it, I think it can be safely removed.
Good luck!
I'm trying to figure out where an element's location is being computed, like hovering over the element's line of code in the code window so that the margin, padding, etc, are shown. Is there a way to do this for pseudo-elements?
Edit: What I should say is I want to see something like the metrics, properties, etc window for pseudo-elements :before and :after. All I really want is to see their location on the screen.
Support for before/after elements is coming very soon! You should have it within the next month or so on Canary!
Yes, there is a way to force an elements state using chrome devtools; if you look on the right side you should see an icon that looks like the cursor with a broken box behind it on the 'styles' tab.
When you click on it, it will have a dropdown menu that will allow you to toggle the selected code's hover, active, focus and visited pseudo-classes.
Is there a way I can have a partially transparent image (or anything really) overlay a clickable region using XHTML and CSS?
#thirtydot If you know of a solution
that works in only one browser I still
would love to here it! Although the
more support the better.
You can use pointer-events: none.
Browser support: http://caniuse.com/pointer-events (works everywhere except IE10 and older)
http://jsfiddle.net/QC5Yw/
Wrap the overlay and background in a clickable div, and set the opacity attribute of the overlay to something less than 1.
http://www.w3schools.com/Css/css_image_transparency.asp
No, the top z-index element will have the focus. But you can create another transparent top layer over the overlay layer, this one will be clickable. So:
z-index:1 Content element
z-index:2 Mask/Overlay element
z-index:3 Click element
That's because the browser cannot distinguish where your PNG is transparent. It just takes it as an image and will not pass the focus through if there are transparent pixels in it.
Thats why you can put a completely empty div with fixed with and height and it will be clickable.