分类导航
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsVueDojoJsonElectronNode.jsExpressXMLAjaxUnityReactFlexWeb前端微信小程序支付小程序百度小程序

jquery – 悬停div以在另一个图标中触发动画效果

jQuery   发布时间：2022-03-30  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – 悬停div以在另一个图标中触发动画效果，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_301_4@
当我悬停我的div时,我需要在图标中设置CSS动画效果.

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;
}@H_944_9@ 
 
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>@H_944_9@ 
 
在行动中这不起作用！
 
 
我该怎么办？
 
 
DEMO

@H_301_4@

解决方法



 CSS中没有以前的兄弟选择器,因此在不更改标记的情况下单独使用纯CSS无法实现所需的效果. 
 
 
 
CSS方法：
 
 
如果您可以将标记更改为类似下面的内容(基本上将div移到图标容器上方)：
 
 
 
 
<div class="newsline">test</div>
<div class="Box-head">
    <i class="fa fa-reorder fa-2x pull-left fa-border animated-div"></i>
</div>@H_944_9@ 
 
那么你可以使用下面的CSS在鼠标悬停时触发动画.
 
 
 
 
.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;
}@H_944_9@ 
 
@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400pX) rotate3d(1,90deg);
    transform: perspective(400pX) rotate3d(1,90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }
  40% {
    -webkit-transform: perspective(400pX) rotate3d(1,-20deg);
    transform: perspective(400pX) rotate3d(1,-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }
  60% {
    -webkit-transform: perspective(400pX) rotate3d(1,10deg);
    transform: perspective(400pX) rotate3d(1,10deg);
    opacity: 1
  }
  80% {
    -webkit-transform: perspective(400pX) rotate3d(1,-5deg);
    transform: perspective(400pX) rotate3d(1,-5deg)
  }
  100% {
    -webkit-transform: perspective(400pX);
    transform: perspective(400pX)
  }
}
@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400pX) rotate3d(1,-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,90deg);
    transform: perspective(400pX) rotate3d(0,90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }
  40% {
    -webkit-transform: perspective(400pX) rotate3d(0,-20deg);
    transform: perspective(400pX) rotate3d(0,-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }
  60% {
    -webkit-transform: perspective(400pX) rotate3d(0,10deg);
    transform: perspective(400pX) rotate3d(0,10deg);
    opacity: 1
  }
  80% {
    -webkit-transform: perspective(400pX) rotate3d(0,-5deg);
    transform: perspective(400pX) rotate3d(0,-5deg)
  }
  100% {
    -webkit-transform: perspective(400pX);
    transform: perspective(400pX)
  }
}
@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400pX) rotate3d(0,-5deg)
  }
  100% {
    -webkit-transform: perspective(400pX);
    transform: perspective(400pX)
  }
}
/* add this 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;
}@H_944_9@ 
 
<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>@H_944_9@ 
 
选择说明：
 
 
 
 
.newsline:hover + .Box-head > .animated-div@H_944_9@ 
 
>选择class =’animated-div’的元素
>是class =’Box-head’的另一个元素的子元素
>使用class =’animated-div’转换元素的相邻兄弟
>当正在徘徊class =’animated-div’的元素时.
 
 
jQuery方法：
 
 
如果由于某种原因无法修改结构,那么您需要创建一个单独的onhover类,如下所示：
 
 
 
 
.onhover {
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
    -webkit-animation-duration:1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}@H_944_9@ 
 
并使用jQuery(或JavaScript)将类添加到.animated-div,同时将鼠标悬停在.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');
    });
});@H_944_9@ 
 
$(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');
    });
});@H_944_9@ 
 
@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400pX) rotate3d(1,-5deg)
  }
  100% {
    -webkit-transform: perspective(400pX);
    transform: perspective(400pX)
  }
}
/* add this 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;
}@H_944_9@ 
 
<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>@H_944_9@ 
 
选择说明：
 
 
 
 
$(this).prev('.Box-head').children('.animated-div')@H_944_9@ 
 
>选择class =’animated-div’的元素
> class =’Box-head’的元素的子元素
>依次是正在徘徊的元素的前一个兄弟(也就是具有class =’newsline’的元素)
 
 
如果在带有class =’newsline’的元素和图标的容器(带有class =’Box-head’)之间有任何额外的元素,则使用下面的jQuery选择器.
 
 
 
 
$(this).prevAll('.Box-head:first').children('.animated-div')@H_944_9@ 
 
我已经将hover作为CSS和jQuery方法的样本,但同样可以应用于其他伪选择器,如active,focus也.

@H_301_4@
        @H_301_4@
            
@H_301_4@
        	


 
@H_301_4@


 

          
       

        
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。







 


      

      @H_673_112@

猜你在找的jQuery相关文章

JS虚拟键盘
由于是触摸屏，所以需要一款JS虚拟键盘。上网找了一个好用的VirtualKeyboard，作了修改。 修改该插件参考的博客文章：http://www.cnblogs.com/xinggong/arch
JS 实现 HashMap
HashMap代码(这种实现方式是错误的，错误原因：代码中_map、_length变量是HashMap的所有实例共用的)： /** * HashMap * 2021年09月09日 */ (functi
jQuery Pagination分页插件的使用
一、引用CSS和JS：View Code二、HTML：View Code三、JS：$(function () { var @R_990_10586@l = parseInt(&quot;@(ViewBag.@R_990_10586@l)
JS数字键盘
JS数字键盘，JS小键盘CSS代码：#numberkeyboard{ border: 1px solid #b3b3b3; BACkground: #f2f3f7; height: 285px; ma
JS 闭包 BUG
C.js代码： /** * 有BUG */ (function (global) { var _id; var _map; var _length; global.C = function () {
zTree的使用
一、节点模糊搜索功能：搜索成功后，自动高亮显示并定位、展开搜索到的节点。二、节点异步加载：1、点击展开时加载数据；2、选中节点时加载数据。前台代码如下：View Code View Code后台代码（
图片左右滚动
需求：页面显示教师信息列表，列表中每一条数据显示图片滚动插件，每张图片的长宽及长宽比例各不相同。 前提条件：美工把静态页面写好 HTML代码： @using Models; @{ List&lt;cm
javascript js 完美解决 click 与 dblclick 冲突，并且不会导致click延迟
示例代码： marker.addEventListener(&quot;click&quot;, function(){ if (!window.markerClicked) { window.mar
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityuniappUnity3dReactFlexAnt DesignelementuiWeb前端微信小程序微信公众号

jquery – 悬停div以在另一个图标中触发动画效果

微信公众号搜 "程序精选"关注
@H_673_112@CSSHTMLNode.jsangularJScocosvue.jsrailsJsHTML5bashspringreactjsreact@L_944_118@angularCSS3实现脚本依赖Luabootstrapjspselenium问题web解析APIxcode库微信小程序xml@L_673_136@table返回小程序httpfiletypescriptforms控件classxml设计聚合wpf域ui区别文档webpackselectunit-testi特定dojo控制inputfirefox@L_944_162@web框架core动画@L_944_166@布局angular2详解表Google窗口svg浏览器grepRestNodeiframe移动buttonubuntu16.0angularjs-expressTP-LINK

大佬总结

以上是大佬教程为你收集整理的jquery – 悬停div以在另一个图标中触发动画效果全部内容，希望文章能够帮你解决jquery – 悬停div以在另一个图标中触发动画效果所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：divjquery中动画另一个图标悬停效果触发
猜你在找的jQuery相关文章
其他相关热搜词更多
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap