jquery - Hover div to trigger animation effect in another icon -
i need set css animation effects in icon when hover div.
css
.animated-div { -webkit-animation-name: flipinx; animation-name: flipinx; -webkit-animation-duration:1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .newsline:hover .animated-div, .newsline:focus .animated-div, .newsline:active .animated-div { -webkit-animation-name: flipinx; animation-name: flipinx; -webkit-animation-duration:1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } html
<div class="box-head"> <i class="fa fa-reorder fa-2x pull-left fa-border animated-div"></i> </div> </br></br></br> <div class="newsline">test</div> in action not work!
how can fix ?
there no previous sibling selector in css , hence effect need cannot achieved using pure css alone without changing markup.
css approach:
if can change markup below (basically move div above icon's container):
<div class="newsline">test</div> <div class="box-head"> <i class="fa fa-reorder fa-2x pull-left fa-border animated-div"></i> </div> then can use below css trigger animation while hovering div.
.newsline:hover + .box-head > .animated-div { -webkit-animation-name: flipinx; animation-name: flipinx; -webkit-animation-duration:1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes flipinx { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg) } 100% { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipinx { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg) } 100% { -webkit-transform: perspective(400px); transform: perspective(400px) } } .flipinx { -webkit-backface-visibility: visible!important; backface-visibility: visible!important; -webkit-animation-name: flipinx; animation-name: flipinx } @-webkit-keyframes flipiny { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg) } 100% { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipiny { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg) } 100% { -webkit-transform: perspective(400px); transform: perspective(400px) } } /* add class */ .newsline:hover + .box-head > .animated-div { -webkit-animation-name: flipinx; animation-name: flipinx; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="newsline">test</div> <div class="box-head"> <i class="fa fa-reorder fa-2x pull-left fa-border animated-div"></i> </div>selector explanation:
.newsline:hover + .box-head > .animated-div - select element
class='animated-div' - which child of element
class='box-head' - which in-turn adjacent sibling of element
class='animated-div' - when element
class = 'animated-div'being hovered on.
jquery approach:
if cannot modify structure whatever reasons, need create separate onhover class given below:
.onhover { -webkit-animation-name: flipinx; animation-name: flipinx; -webkit-animation-duration:1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } and use jquery (or javascript) add class .animated-div while hovering on .newsline.
$(document).ready(function(){ $('.newsline').hover(function(){ $(this).prev('.box-head').children('.animated-div').addclass('onhover'); }, function(){ $(this).prev('.box-head').children('.animated-div').removeclass('onhover'); }); }); $(document).ready(function(){ $('.newsline').hover(function(){ $(this).prev('.box-head').children('.animated-div').addclass('onhover'); }, function(){ $(this).prev('.box-head').children('.animated-div').removeclass('onhover'); }); });@-webkit-keyframes flipinx { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg) } 100% { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipinx { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg) } 100% { -webkit-transform: perspective(400px); transform: perspective(400px) } } .flipinx { -webkit-backface-visibility: visible!important; backface-visibility: visible!important; -webkit-animation-name: flipinx; animation-name: flipinx } @-webkit-keyframes flipiny { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg) } 100% { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipiny { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg) } 100% { -webkit-transform: perspective(400px); transform: perspective(400px) } } /* add class */ .onhover { -webkit-animation-name: flipinx; animation-name: flipinx; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .box-head{ clear: both; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="box-head"> <i class="fa fa-reorder fa-2x pull-left fa-border animated-div"></i> </div> <div class="newsline">test</div> <br> <div class="box-head"> <i class="fa fa-reorder fa-2x pull-left fa-border animated-div"></i> </div> <div class="newsline">test2</div> <br> <div class="box-head"> <i class="fa fa-reorder fa-2x pull-left fa-border animated-div"></i> </div> <div class="newsline">test3</div>selector explanation:
$(this).prev('.box-head').children('.animated-div') - select element
class='animated-div' - which child of element
class='box-head' - which in-turn previous sibling of element being hovered on (that is, element
class='newsline')
if have elements in between element class='newsline' , container (with class='box-head') of icon, use below jquery selector instead.
$(this).prevall('.box-head:first').children('.animated-div') i have taken hover sample both css , jquery approaches same can applied other pseudo-selectors active, focus also.
Comments
Post a Comment