I have this JS Fiddle that works well, making my custom title display on mouseover and hide on mouseout. The problem I am having when transporting it to real world environment is that the ~ tilde selector doesn't work anymore. Is there another way to do this? My .message div is at very end of page ( as I had to close SVG tags first ), so I know the + plus selector won't work.
I realized that the real problem on my webpage as opposed to the fiddle is that my button class items are svg elements and while the tilde targeting works properly if the two elements are non svg, it doesn't work properly if one element is svg and the other isn't.
I added an svg element of the same class "button" to the Fiddle to demonstrate this issue.
If anyone can show me how to properly target this, I will be most grateful.
JS Fiddle Here
.button:hover ~ .message {
opacity: 1;
transition: opacity .6s ease-in;
-moz-transition: opacity .6s ease-in;
-webkit-transition: opacity .6s ease-in;
}
Am I missing something? Is there a reason you can't just apply class="button" to the SVG? It seems to achieve what you are after.
Demo here
Update
Instead of trying to achieve the message show with pure CSS, just use a little extra jQuery. Add a class to the message element when you mouseover "button".
$('.message').addClass("visible-message");
Then remove it again when you mouseout.
Demo here
Related
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;
}
Yesterday I got my problem solved about jquery, which didn't load correctly. Today I struggle with yet another problem: two transitions for one element. The first transition starts when the page has loaded: it fades in. This one actually works when I do not use my second transitions. My second transitions must start whenever someone hovers over the ul. The problem is that the hover transitions 'overwrites' the fade-in transition. My jsFiddle:
http://jsfiddle.net/2cpX6/6/
Thanks in advance.
CSS rules with the same name override each other, just like any other rule.
Try this:
transition: opacity 2s ease-in, color 0.3s ease-in-out;
Note that you only need transition and -webkit-transition, since Firefox and Opera now fully support the unprefixed version, and -ms-transition never existed.
You can't put the same CSS rule for the same ruleset without it being overwritten. This applies to everything. For example, if you had:
span {
color: red;
color: green;
}
The spans would be green. This means that you cannot stack transition rules for the same ruleset.
You can create multiple separate transition rules using a comma.
transition: opacity 2s ease-in, color .3s ease-in-out;
http://jsfiddle.net/ExplosionPIlls/2cpX6/7/
I am using the "just me" effect from here, however I am having problems with Safari v5.1, it just doesn't render the modal. When inspecting I can see that the modal should be there but it just stays transparent. Is there any trick to force the browser to re-render?
EDIT: I have also checked the css properties that are being used and they are supported.
EDIT2: Here's the link in case it's hard to see http://tympanus.net/Development/ModalWindowEffects/ , I am using exactly the same code and the highest z-index.
To anybody interested:
In this case the transition is transition: all .3s ease; but Safari has problem when it has to transition opacity and visibility at the same time. Changing to transition: opacity .3s ease, transform .3s ease; (with all necessary prefixes) fixed it.
.faded{
opacity: 1;
}
This worked for me.
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.
(For browsers that support CSS transitions, including the latest versions of Firefox, Safari, and Chrome. Strangely, this issue does not appear in Opera.)
Has anyone else noticed this? When you put a color transition on a:link, the a:visited transitions to the a:link color before displaying the a:hover color. Check it out:
http://jsfiddle.net/Mgzv9/2/
Can this color flicker be avoided?
I have been banging my head around this problem for a while.
The thing is, that this problem is actually hard to reproduce.
OK, so what happens, sometimes while loading/refreshing a page with color transition on links, the color is first transitioned from the default browser link color, to the CSS defined color. It actually doesn't happen for me, when I open the HTML from disk, but if I put it in a server (even local server), then this problem shows up.
To reproduce the problem, create an HTML, add a stylesheet and define a transition for links, something like this:
a {
color: red;
-webkit-transition: color .5s linear;
-moz-transition: color .5s linear;
-o-transition: color .5s linear;
-ms-transition: color .5s linear;
transition: color .5s linear;
}
a:hover {
color: green;
}
...and then include the stylesheet in your HTML.
Put the files on a server, and try opening the page in Chrome, try refreshing the site, sometimes you should first see a transition from the default blue color, when the pages loads.
After deconstructing some sites, where there seemed to be no problem with this, I came up with this simple solution.
If you include some Javascript files too, then just place Javascript includes AFTER your CSS includes.
It even work if you just include an empty JS file, after you stylesheet.
Hope this helps!
I never seen it happen while using color. But yea it happens when using images in baground.This is bcoz of the loading time, and can be avoided by using all the transition images in one big image and use baground-position property to control the image.