Opacity transition for a:hover not working - css

I want all elements that are links to show consistent behavior.
a:hover { opacity: 0.5; }
This works in IE and Firefox, but the opacity (and associated CSS transition) is not properly applied to the child elements of the <a> tag in Chrome and Safari. If I add an explicit rule for a <div> as a child element, it works in Chrome and Safari:
a:hover, a:hover div { opacity: 0.5; }
So far so good, and this has been asked and answered before. The problem that I have is that by adding the rule for the containing <div>, the opacity gets applied twice in IE and Firefox, making the element too transparent.
I need to cover both scenarios - <a> wrapping a <div> or not, without writing lots of explicit CSS rules. How can I do that?
http://liveweave.com/fMsz7m

What worked for me in Safari was adding display: block into the a tag
a:hover {
opacity: 0.5;
transition: opacity 0.2s ease;
display: block;
}

I'm not sure whether this counts as a direct solution to your question (I'm not sure why the children aren't inheriting), but you can add display: block to the a in your css which will work (tested with Firefox and Chrome).
JSFiddle DEMO
An alternative is to assign the hover to your <div>, parent of <a>.
JSFiddle DEMO
I feel as though there are better solutions/explanations out there, maybe this one will spark an idea for someone else.

Related

Problem with custom link cursor in Chrome

I want to use a custom cursor on hover for links. It works fine on Safari and Firefox, but on Chrome it jumps back to the default cursor for a millisecond, and then goes to my custom cursor.
Codepen: https://codepen.io/ford1234/pen/vwzRgJ
I've recreated the problem in Codepen but it also happens on the site I'm applying it to.
<div>
<p>Hello</p>
</div>
<style>
html {
cursor: url('http://telephoneavenue.art/wp-content/uploads/2019/02/black-01.png'), auto;
}
a:hover {
cursor: url('http://telephoneavenue.art/wp-content/uploads/2019/05/blacktriangle-small17px.png'), auto;
}
Expected result: A transition from the circle to the triangle.
Actual result: A transition from the circle, to the default hand pointer, to the triangle.
remove ":hover" on your selector.
your selector must be;
a{
cursor: url('http://telephoneavenue.art/wp-content/uploads/2019/05/blacktriangle-small17px.png'),
auto; }
Have you tried out a transition-duration or a transition-delay? This is used to define the duration of a specified transition. This is the length of time it will take for the targeted element to transition between two defined states.
.example {
transition-duration: 0s;
// or
transition-delay: -1s;
}
Also keep in mind that some features are only supported by certain versions of the browser.

iron-overlay-backdrop style not being applied

I have a custom element which has an iron-overlay-backdrop as a child element (inside a paper-dialog). I am trying to increase the fade time (which I can do if I can edit the css in chrome). When I try and apply changes to the style --iron-overlay-backdrop the changes are not being applied in the child. What I have is:
<style>
:host {
--iron-overlay-backdrop: {transition: opacity 5s;};
}
</style>
I have also tried something simpler with --iron-overlay-backdrop-opacity: 0.8 which does not work either. For some reason the style is not being applied. Does anyone know what I am doing wrong, or how I can get the desired behavior of a longer transition time?
The custom property for the overlay backdrop is : --iron-overlay-backdrop-opacity
you can set the opacity of the host and it's transition this way
:host{
opacity: var(--iron-overlay-backdrop-opacity, 0.8);
transition: opacity 5s;
}

Is it possible to smoothly hide html element and remove it using css attribute selector and property display:none?

I am looking for the way to smoothly hide html element and then remove it at all to deny any interaction with hidden elements. I change css property "opacity" from 1 to 0.00001 to do this. The problem is that element hide, but it's still on the screen and user can hover it. Is it possible to remove transparent element using display:none without JavaScript? I tried to do this with CSS attribute selectors, but it does not work.
.element[opacity^=0.00001] {
display:none;
}
http://jsfiddle.net/DkX3L/
Since you're probably already using JavaScript to hide the elements, the best method would be to use that to stop the interaction as well. But since you've asked for a CSS solution, you could use this (IE11+):
.element {
-webkit-transition: 2s;
transition: 2s;
}
.element:hover { /* .element.hidden */
opacity: 0;
pointer-events: none; /* <-- This one */
}
DEMO

How to convert a display toggle effect to CSS 3 Transitions effect

First of all I have to say that I'm working on website which I can only manipulate its CSS.
So, please don't suggest me a javascript/html solution.
Here is my problem,
You can see in this jsFiddle demo, there is a basic toggle display method but it doesn't have a transitions effect on default CSS. The HTML is exactly like that, and I don't have a permission to change its HTML or javascript, I can only play with CSS.
I want to add CSS 3 Transitions effect to this toggle method.
As Jim Jeffers's answer on this question, transitions effect never works on
display: block < - > display: none
So I will always need to keep the element display block.
I tried this but it didn't work,
.infocontent {
-webkit-transition: opacity 1s ease-out;
}
div[style='display: block; '].infocontent {
opacity: 1; height: auto !important;
}
div[style='display: none; '].infocontent {
display:block !important; opacity: 0; height: 0px;
}
Why isn't it working? How can I do that?
Try to use transition on max-height instead of height.

CSS3 Transitions

I want to change the background color of the page when one hovers over a button/div tag using only CSS3 transitions. I want the color to come gradually and hence would like to use a transition effect, but I don't know how to relate the background color of the page to a hover event on a div. Can someone please help me with my code ? Thank You
This is not currently possible in CSS3.
In the future (CSS4?), you'll be able to do it as follows:
body {
background-color: red;
transition: background-color 1s ease;
}
$body #theButton:hover {
background-color: green;
}
Note the $ in the second selector; It indicates which element the CSS block applies to. Unfortunately, there's not even a single implementation of this yet, so you'll have to resort to Javascript (which I assume you know how to do. If not, just ask).
Update (using jQuery):
CSS:
​body {
background: red;
transition: background-color 1s ease;
}
body.hover {
background: green;
}
Javascript:
​$('#theButton').hover(function(){
$('body').addClass('hover');
}, function(){
$('body').removeClass('hover');
});​​​​​​​​
Here's the fiddle: http://jsfiddle.net/mWY88/1/
For maximum efficiency, you should cache your selectors.
In fact, you can change the body background-color very easily with CSS3 transition animation like I'm doing it here. I got the logic from here.

Resources