I have an interactive background that uses css to change opacity on hover. On top of this (absolute positioned) is a text layer. In order to allow for the background to react even with the text on top I have added css pointer-event:none to the div containing text.
This works well, but it would be better if I could still keep the ability to highlight the text.
Does anyone know away to limit which pointer-events are suppressed?
Actually you can't do what you want. If you disable pointer-event, text can't be selected. But you can do this functional by some jquery magic.
first you put background hover effects into some class:
.hov{background: black !important;} //just example
then assign it to hover effect:
$('#wrap').hover(function() {
$('#wrap').toggleClass("hov");
});
and translate hover event from you block into you background:
$('#block').hover(function(e) {
$('#wrap').trigger(e.type);
});
So look into fiddle and you'll understand
EXAMPLE
Related
I am trying to make the "cloth" text and icon to change its opacity as soon as the mouse is entering parent's div area. At the same time I want to cancel the effect once the mouse is over the "opt" button, and change its color to blue
This what I was able to achieve, but if I hover over the "opt" button, the text and icon above still have the opacity effect:
.options-btns:hover {
background-color: #72b7f8;
}
#Cloth-Tool:hover #Cloth-Tool-img,
#Cloth-Tool:hover #Cloth-Tool-Text {
opacity: 0.6;
}
#cloth-option-btn:hover #Cloth-Tool-img,
#cloth-option-btn:hover #Cloth-Tool-Text {
opacity: 1;
}
<div onclick="runCloth()" id="Cloth-Tool" class="tools">
<img class="toolIcons" id="Cloth-Tool-img" src="./images/cloth.svg">
<p class="tools-text" id="Cloth-Tool-Text">Cloth</p>
<button class="options-btns" id="cloth-option-btn">OPT</button>
</div>
I also what to be able to detect where user clicks: parent div(including cloth text and icon area) or on "opt" to be able run functions such as "runCloth()" or "openOptions()" later on JS side
You can use an alternate method to achieve the same output. By using JavaScript and adding an event listener on the option button in which you will add hover as the event listener apply your required properties within JavaScript they will overwrite your properties of CSS. I you still can not get me idea let me know I will write a code for it.
I want to add a scan line effect to my website to make it look more retro, but last time I tried that I think I was unable to click anything because the translucent scan line overlay was "eating" all the mouse clicks. How can I make an overlay image that lets elements beneath it get clicked?
If the "scan line" is just an overlaying decorative element, simply use CSS
.scanLine {
pointer-events: none; /* element will pass mouse events through */
}
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
I have button which is <a> element with href, which doesnt have any background set on :active/:focus/:visited, but on force/3dTouch tap it gets this weird #b8b8bc background under the text only (while <a> doesnt have any children e.g. <span> etc so I suppose this is the text node highlight).
here's the gif to illustrate the behavior.
I've tried adding -webkit-tap-highlight-color: transparent but it changes only regular tap color, not the forced/3d one
also I thought maybe that's selection color (as I can reproduce this on various websites) so tried to use selection selectors which didn't help as well
::selection {
background: transparent;
}
::-webkit-selection {
background: transparent;
}
::-moz-selection {
background: transparent;
}
Any ideas about possible origin of this?
Good job digging up.
I had the same issue plus another one and here are my solutions.
Post is old but someone could find it useful like me today.
First of all, the forced background was covering my link text totally because I was using user-select: none; on my header links.
So that's something to check, just in case.
Regarding the background color, Force Touch doesn't use the link parent element background but the one that's under it.
If you want to "feel it", we could say that Forced Touch digs into the direct parent background and let the under layer appears.
So, to counter that without having to touch to background color, I use some z-index in the parent element to elevate it, preventing Forced Touch to "dig" :)
So if your links parent element is named card, you can add to your CSS:
.card {
isolation: isolate;
z-index:1;
}
Now, Force Touch will use the parent background color as we want to.
Okay so I found sort of "solution" based on parent's color.
Try to set *{background: red}.
If worked try set same on few parents .parent1 { background: pink}, .parent2 { background: lightblue}, .parent1 { background: salmon} etc.
In my case I found the color applied to force touched text was menu wrapper's background that takes most of the screen when menu is opened.
Side effect of this change - all forcetouched elements will have same color, no option to specify :hover or :active colors (you can see the color is slightly different on the 1st click) and ALL links will have same background:
I imagine you can try setting wrapper's background via JS based on what is clicked. Not sure if that will work. see docs here:
WebKit DOM Programming Topics
So far this seems to me too fragile to touch and I would not recommend doing this. Though you can change this color I've decided to let OS do what it wants here.
I have an image with buttons overlain on it. Because the buttons are semitransparent, and I don't want the labels to be, I've overlaid a span on each button (with 100% opacity). To make sure that the spans don't intercept all the clicks, I used the pointer-events: none; css property on the spans.
Here's the structure of the markup (Jade):
div.slide
div.controls.buttons
button.move.forward
button.move.back
button.info
div.controls.icons
span.move.forward.icon.ion-chevron-right
span.move.back.icon.ion-chevron-left
span.info.icon.ion-information
.icon.ion-* are styles for the ionicon icon font
It looks like this when rendered:
The problem is, that because I have pointer-events:none;, I can't use :hover or :active on the .icons span. Is there a way to propogate the click event to the element below without using pointer-events: none?
Am I going to have to put a listener on each button then trigger the click event using javascript? Or is there a nicer way?
Codepen example here
I implemented a simple tab navigation by using <ul><li><a> , the problem is that there are several "layers" on each tab still needed. what I mean is, In my current implementation I have:
-tab text which is <a>text</a>
-on each tab I have a tab icon image, which I put on <li> as background-image of <li>,
But I still need:
-tab seperator image (A vertical bar image) which I intend to put on <a>,and position it on the left side background-position: left , it is working but this implementation is not in my code which I showed below on jsfiddle site because I did not find a suitable image on internet
-tab background image which occupy the whole tab, I have no idea where I should put this image?
Please check & run my implementation here on jsfiddle, in the css code, I used background-color instead of background-image just to express what I want to achieve, but I need to use background-image as the tab background.
What I tried:
I tried to put the tab background image on <li> but it will hide the
icon image which has already on <li>,
I tried to put the tab background image on <a> but it will also hide the tab seperator image when mouse hover
How to get rid of this layer probelm on tab implementation then? (Please do not suggest me to use less image, since it is one requirement of this app to use those images.)
(By the way, all images I mentioned have mouse "hover" counterpart)
If you don't want to change the HTML, you can use pseudo-elements:
Fiddle: http://jsfiddle.net/Pq7LC/39/
li:before{
content: "";
background: pink;
width: 20px;
height: 61px;
display: block;
position:absolute;
}
li:first-child:before{ /* Don't add image border before first li */
content:none;
}
You can do it with css, no need of images.
http://jsfiddle.net/Pq7LC/40/
Hope it helped you :)