We Keep Coding

Control the behavior of clicking & Hover on links, buttons and elements on touch screens (with example)

On devices with touch screens such as smartphones and tablets on some websites, when you click on different page elements such as links, buttons, checkboxes, etc., an effect is displayed (the background color of the clicked element is an effect Blue fades) which indicates a click on the desired element. But in some websites, this effect is not displayed and if any element that can be clicked or hovering, if this is clicked, this effect will not be displayed and there will be no change in the background color of the clicked element.
For this topic, I have given two examples. The first is the stackoverflow site itself, which by clicking on icons, elements and links, the effect is displayed and the background color of the element changes.
And the second example is related to font pages and Google icons, which does not happen. Clicking on any element that can be clicked or hovering does not show any effect and does not change the background color of that element.
Now my question is how can this effect be disabled so that it is not displayed by clicking on any element and this effect does not appear? What is the solution to disable this effect?
Thankful
Example number one:
Example number two :

Tap color can be disabled by changing the -webkit-tap-highlight-color to transparent
-webkit-tap-highlight-color: transparent;
webkit-tap-highlight-color docs

CSS Hover Effect on info-box but Distinct Colors

I was migrating a website from Wix to Wordpress, and I was using LC page builder.
When it came to the infobox, I saw the wrapper didn't have any hover bg color, so I created it with custom CSS, but when I checked the Wix website again, I saw that the color changes only for hover on the wrapper but not on the button.
I used this CSS code:
#dslc-module-ff03d9andc .dslc-info-box .dslc-info-box-wrapper:hover {
background-color: #cc8419;
}
Now, since the button is part of info-box, I can't only pick the hover effect on the wrapper (if I can, please tell me).
How can I apply the hover effect on the wrapper of 1 color and the wrapper color hover effect when I hover on a button? The other choice could be the hover effect only on the wrapper, but when I hover on the button, the wrapper returns to it's original bg color.

In Video.js, where can I change the big play button color when the mouse is hovering over the video?

Using the video.js default skin editor (CodePen), I successfully changed the SCSS $primary-background-color to a shade of orange (specifically #f60), which generated CSS to give the background of the control bar components and the big play button variations of orange.
This works fine, but when I move the mouse cursor over the video, the big play button background changes to grayish blue (the default), and then back to orange when the mouse is not over the video. I'd prefer to have the big play button remain orange whenever it is displayed, no matter where the mouse is.
I hunted around in the CSS/SCSS in the default skin editor, but can't see what is controlling the background color of the big play button when the mouse is over the video. I'm sure I'm missing something, or perhaps this is controlled in another part of the CSS/SCSS or JS that is not exposed in the video.js default skin editor.
I tried adding the following to my CSS:
.video-js .vjs-big-play-button:hover {
background-color: rgba(255, 102, 0, 0.7);
}
and that gives me an orange big play button when I'm hovering over the button itself. But I would like the button to remain orange as the mouse travels over the video before it gets to the button (i.e., I want the button to remain orange all the time).
So, there are three cases, two of which work and one that I'm trying to get working:
When the mouse is completely outside the video.js player area, the big play button has the right color (handled by the custom skin CSS).
When the mouse is hovering over the big play button itself, the button has the right color (handled by the hover rule shown above).
When the mouse is hovering inside the video.js player area, but is not hovering directly over the big play button, the button has the default color, not the color I want it to have. This is the part I'm having trouble with.
What do I need to change/override to ensure the big play button will stay orange even while the user hovers the mouse over the video (and not over the button itself)? Thanks.

The pen is missing the secondary background colour and hover state styles
$secondary-background-color: lighten($primary-background-color, 33%) !default;
.video-js:hover .vjs-control-bar,
.video-js:hover .vjs-big-play-button,
.video-js:hover .vjs-menu-button .vjs-menu-content {
background-color: $secondary-background-color;
background-color: rgba($secondary-background-color, 0.7);
}
Here's an updated codepen

How to show a semi transparent overlay with button (!) on an image?

i am using ASP.Net to edit an image. I would like to have onMouseOver an semi transparent overlay on my image which show me some button. One important thing is, that some of these buttons are role-based so that i must be able from code behind to set those button visible/innvisible. How could i do this?

Check if image background is white using Javascript

im creating a way for users to add some buttons to their image. Now i thought it would be cool if the button could change color depending of the background color of the image.
To start with i wanted to go for the black / white contrast.
So if the background is white then the button will be black and if the background color is black then the button should be white.
My question is however is it possible to identify the background of an image using only javascript? and if so how?

This will take care of everything for you just set up the selectors for each condition.
https://github.com/kennethcachia/Background-Check