Hang in one div which causes the effect to hang in another
I have a problem: I have a hover effect in one div, but I would like to trigger the effect when the cursor hovers over another div. Something like:
<div id='mouse-hover-in-this-div'>
blablabla
<div id='should-trigger-mouse-hover-in-this-div'></div>
</div>
I see some solutions here but they don't work. Specifically, I tried to change the css property of the inner div using the jquery.css method, but I was unable to provide the following option:
-webkit-transform: translateY(16px);
transform: translateY(16px);
-webkit-animation-name: hang;
animation-name: hang;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
Hover over hover.css library, I just want the arrow bounce effect to fire when the whole div is hovering, not just the little arrow. Is there a solution to my problem?
source to share
#outside-box:hover .animated-div {
-webkit-transform: translateY(6px);
transform: translateY(6px);
-webkit-animation-name: hang;
animation-name: hang;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
source to share
For html
<div id='mouse-hover-in-this-div'>
blablabla
<div id='should-trigger-mouse-hover-in-this-div'></div>
</div>
you can have css like
#mouse-hover-in-this-div:hover #should-trigger-mouse-hover-in-this-div{
//HOver Css here
}
see working fiddle here http://jsfiddle.net/jdksbg51/
source to share
You can achieve this by using a CSS descendant selector to select #inner-div
when you hover the #outside-box
div.
JSFiddle - DEMO
HTML:
<div id='outside-box'>this is some text
<div id="another-div">
<div id='inner-div' class='animated-div'>-></div>
</div>
</div>
CSS
#another-div {
display: inline-block;
}
.animated-div {
display: inline-block;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
#outside-box:hover .animated-div, #outside-box:focus .animated-div, #outside-box:active .animated-div {
-webkit-transform: translateY(6px);
transform: translateY(6px);
-webkit-animation-name: hang;
animation-name: hang;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
source to share
Here you are based on your fiddle http://jsfiddle.net/a0xx6kqa/4/
When you hover over the parent, it will look for the child with class .animated-div and animate that div no matter how many other elements you have in the parent :)
.animated-div {
display: inline-block;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
#outside-box:hover .animated-div {
-webkit-transform: translateY(6px);
transform: translateY(6px);
-webkit-animation-name: hang;
animation-name: hang;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
Just add # external-box: hover.animated-div where you are calling the animation and not the rest of the classes
.animated-div: hover, .animated-div: focus, .animated-div: active {} should be # outside the box: hover.animated-div {}
source to share