I'm trying to do an hover effect with a svg. This is the effect I would like to achieve. When I do a mouseover on the two paths and the text, I want the other paths and texts to have a lower opacity (I did this part), but I also want the the percentage to appear. When the mouse isn't over anything, I want all the paths and texts to have an opacity of 1 and no percentage visible.
I used this code to change the opacity of the paths
.tracciati:hover > g {
opacity: 0.25;
}
.tracciati:hover > g:hover {
opacity: 1;
}
This is the code: http://jsfiddle.net/ysrzjs28/
I refactored your html to include the percentage elements next to their respective graph elements. This made it easier to select the sibling element for display using CSS. Since there is no parent selector in CSS, you would have to use jQuery or javascript to achieve the results you want using pure CSS. I added a container g element and re-assigned your classes. The CSS looks like this
.container:hover > .tracciati {
opacity: 0.25;
}
.container:hover > .tracciati:hover {
opacity: 1;
}
.percentuali {
opacity: 0;
}
.tracciati:hover + .percentuali {
opacity: 1;
}
Here is a working fiddle: http://jsfiddle.net/ysrzjs28/2/
Related
I have a tab component where the user can switch between brand and model. Is it possible to add a smoothing or an effect when changing the component that is being shown? I'm finding it too dry, with no effect, when the user changes the tab.
code:
https://codesandbox.io/s/empty-darkness-bfijv?file=/src/App.js&fbclid=IwAR2diVKlb4fGrkjCmnR8Lq5IaPAB9GiiVrL5Vepz_LLNlNXAO-_gL1-NVNg
You could add a css keyframes animation to your data.
To do that, give your div that wraps your data a className. I named it className="data".
Then in your css:
.data {
animation: fadeIn 0.5s;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
https://codesandbox.io/s/interesting-pateu-bbsld?file=/src/styles.css:396-411
So basically I have four div boxes, which appear when a class is added through javascript. They appear with a transition-delay so they don't arrive at the same time when the class is added. This is done through this code:
&.active {
#for $i from 1 through 4 {
&:nth-last-child(#{$i}n) {
transition-delay: #{($i * 0.07) - 0.07}s;
opacity: 1.0;
}
}
&:hover {
transform: scale(1.20);
transition: all 0.2s ease-out;
}
}
So when the .active class is added the divs goes from opacity: 0.0 to opacity: 1.0 with a transition-delay. This works as intended. However, when I do the hover effect this delay is also present on the individual divs. So the first hover is quick, and the rest is delayed etc.
I am not entirely sure how to fix this. Can I somehow "delete" the transition-delay after, or...?
It appears you want to prevent the delay effects just when the element is being hovered, what you can do is add :not(:hover) to your original selector that adds the transition-delay. Replace your original selector:
&:nth-last-child(#{$i}n)
with:
&:not(:hover):nth-last-child(#{$i}n)
Is there a way to fade in an image when a user scrolls the image into view using purely if not mostly CSS?
I have a bunch of images displayed and I'd like the images to appear as they scroll down as a nice effect.
If you want the image to fade in only when the user can see it (after scrolling the page), you can't do it with CSS only. To make the fade in/fade out effect on hover use opacity and transition. Example
img{
opacity: 0.6;
transition: all 1s;
}
img:hover{
opacity: 1.0;
}
If you want to use JQuery, it's possible. See this exmaple.
img
{
opacity:0.4;
}
img:hover
{
opacity:1.0;
}
The CSS3 property for transparency is opacity.The opacity property can take a value from 0.0 - 1.0\
A lower value makes the element more transparent.
img:hover {
-webkit-filter: grayscale(100%);
}
Check this link, it would be of great help for you:-
http://designshack.net/?p=36895
Is there a way to REMOVE completely the Transparency on Toastr.js?
I tried to change the various lines on the .less files
.opacity(#opacity) {
#opacityPercent: 100; // instead of #opacity * 100;
opacity: 1; // instead of #opacity;
-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=#{opacityPercent})";
filter: ~"alpha(opacity=#{opacityPercent})";
}
and every place where it stated opacity(x) where x was not 1 but it still displays opacity.
I also tried to add the following lines on my own CSS
.toast {
opacity: 1;
}
#toast-container > div {
opacity: 1;
}
but i still get the semi opacity on div message display. On mouse over, the div color becomes full (no transparency). I'm trying to always have it full color (no transparency).
Try overriding it using !important:
.toast {
opacity: 1 !important;
}
#toast-container > div {
opacity: 1 !important;
}
You can also try "inspect element" in Chrome to see which css tag is causing the opacity.
If that doesn't work, can you perhaps provide a link to your page?
It Depends on What You Mean by "Remove"
If you don't want the mixin generating any CSS at all, but also don't want to remove all the mixin calls within the code, then just do this (comment out the code):
.opacity(#opacity) {
// #opacityPercent: #opacity * 100;
// opacity: #opacity;
//-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=#{opacityPercent})";
//filter: ~"alpha(opacity=#{opacityPercent})";
}
The above will "do nothing." If you want some type of CSS generated (for some reason, I cannot think of why), but you do not actually want to have that code apply any opacity setting in the browser, then give it a bogus value that the browsers will ignore, something like this:
.opacity(#opacity) {
#opacityPercent: bogus;
opacity: bogus;
-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=#{opacityPercent})";
filter: ~"alpha(opacity=#{opacityPercent})";
}
You can check out that the above generates no opacity within a browser by looking at this fiddle and examining it with an inspection tool (like Firebug, etc.).
I really believe you seek the first option however.
The following works with v2.1.3
#toast-container > div {
opacity: 1;
}
With the !important flag, there would be no fadeIn and fadeOut.
Normally, I would select the parent and add a hover pseudo class:
parent {
opacity: 0.7;
transition-duration: .2s;
}
parent:hover {
opacity: 1;
}
But there are too many diffrent parent elements, with diffrent tags and classes.
I only know that every parent have only children with the [color] attribut.
(parent "which have" > [color]) {
opacity: 0.7;
transition-duration: .2s;
}
(parent "which have" > [color]):hover {
opacity: 1;
}
Is there something like a parent selector in CSS3 (CSS4: '!')?
Or is there another way to animate a parent on children hover?
Thanks for help
Your question is a little bit ambigius but let me guess what you mean and try to give you a solution;
you have parent div element with color attr (assume it is red) and you want it's child element have style in hover state.
div[style~='color:red']>p:hover{
//your code goes here
}
but your color must be defined as inline style otherwise you need to look to other attr like data attribute data-selparent='yes'.