CSS transition: animate parent on children hover - css

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'.

Related

Different transition delays for added class and hover effect

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)

What is the difference between applying CSS transition property in hover rather than in its normal state?

I'm learning CSS3. Now, what I've seen in w3schools website is that:
CSS
#ID {
transition: transform 3s;
}
#ID:hover {
transform: rotateX(20deg);
}
And what I did is this:
CSS:
#ID:hover {
transform: rotateX(20deg);
transition: transform 3s;
}
Both are working. So, the question is: Can I put both transition and any transformation property in same selector? Or is it not the right way?
SHORT ANSWER:
If you define your transition property in element:hover, it will only get applied in that state.
EXPLANATION:
Whichever CSS properties you define in element:hover will only be applied when the element is in the hover state, whereas whichever CSS properties you define in your element will be applied in both states.
Transition property declared in normal state:
See how the transition always runs when the element's state is changed. When you stop hovering the element it will still make the transition back to its normal state.
CODE SNIPPET:
#ID {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: royalblue;
transition: transform 1s;
}
#ID:hover {
transform: rotateX(60deg);
}
<div id="ID"></div>
Transition property declared in hovered state:
See how the transition breaks when you stop hovering the element and it jumps to its normal state immediately.
CODE SNIPPET:
#ID {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: royalblue;
}
#ID:hover {
transition: transform 1s;
transform: rotateX(60deg);
}
<div id="ID"></div>
The first example is generally correct, as the transition timing is stated on the unaffected state. But that's based on the majority of examples I've seen of how to generate transitions on hover actions.
1st case :
All your transition in the #ID will have a transition of 3s.
When you hover your #ID, your transformation is rotateX(20deg).
2nd case :
When you hover your #ID, you have a transition of 3s.
Overall :
All the transitions from the first css will have a duration of 3s. Then you can apply transitions on your #ID from different places. Whereas in your second case you separate them and if you want to have another transitions triggerd by something else than hover, you will have to specify the duration again.
Both are correct
When a transition is specified for the :hover state, the transition won’t work on mouse out.

Hover css on svg

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/

Why is the order of opacity declaration important in this two-phase fade-in?

I have written a two-phase fading button. I have noticed that the order the opacity states are declared, is important.
This CSS works:
.item .btn-remove {
transition: opacity 0.5s ease-in-out;
opacity: 0;
}
.item:hover .btn-remove {
opacity: .25;
}
.item .btn-remove:hover {
/* works here */
opacity: 1;
}
Versus the version that does not work:
.item .btn-remove {
transition: opacity 0.5s ease-in-out;
opacity: 0;
}
.item .btn-remove:hover {
opacity: 1;
}
.item:hover .btn-remove {
opacity: .25;
}
I can see that the order of declaration makes sense, but do not understand why this would make a difference as the rules are not conflicting (as far as my understanding of CSS thus far goes).
Please see my fiddle for an example.
All ancestors of an element that matches :hover will also match :hover. Although :hover is a CSS selector, this is specified in the HTML spec, not Selectors. From section 4.14.2 of W3C HTML5:
The :hover pseudo-class is defined to match an element "while the user designates an element with a pointing device". For the purposes of defining the :hover pseudo-class only, an HTML user agent must consider an element as being one that the user designates if it is:
An element that the user indicates using a pointing device.
An element that has a descendant that the user indicates using a pointing device.
Therefore the .item:hover .btn-remove rule does apply even when .btn-remove itself matches :hover (i.e. when .btn-remove is the element that is being designated). In other words, the two CSS rules do in fact overlap with one another, thus creating a conflict.

How to keep divs in a hovered state?

How can I keep my divs in the hovered state permanently once initially hovered?
Ideally I need something that is going to work with the existing code (if possible) as there are many instances:
#cover:hover img{
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
}
If you are asking to hover over an element, and continue display that element after the cursor has moved away from it, this cannot be done in CSS. It must be done with Javascript.
I would create a class for the state after the image is hovered and before, like so.
.hover-to-change {
opacity: 0.0;
-webkit-transition: all 0.2s ease-in-out;
}
.hovered {
opacity: 1.0;
}
Then add some jQuery to change the class when the image is hovered.
$(document).ready(function() {
$(".hover-to-change").mouseenter(function() {
$(this).addClass('hovered');
)};
});
This should work.
Because CSS is only markup, it will not actually change the state of the HTML or CSS unless it is immediately specified in the page. But the -webkit-transition should work without any additional jQuery.

Resources