对”多组同类元素添加相同事件，但分别执行各自的事件-以移入移出为例“的探讨

来源：互联网发布：批量图片透明度软件编辑：程序博客网时间：2024/05/29 18:05

相信很多人可以so easy的给“多组同类元素添加相同的事件”，但是要实现分别执行呢，估计会遇到一点麻烦。

拿我来举例：

问题1：事件会一起触发？怎么会这样

问题2：用css移入移出效果，怎么实现不了呢？

起初经过不断的查资料，我只是用jQuery实现了.但这并不是我想要的效果.源码如下：

<html>   <head><meta charset="UTF-8"><title></title>   <style>*{padding:0;margin:0;text-decoration:none;list-style:none}.edit{width:1200px;margin:100px auto;box-sizing:border-box}.edit .editTop{width:inherit;height:40px}.edit .editDetail{width:inherit;height:284px;margin-top:10px;}.edit .editTop .editFirst{width:190px;height:40px;float:left}.edit .editTop .editFirst img{display:block;margin-top:3px;float:left;cursor:pointer;}.edit .editTop .editFirst span{padding-left:5px;font-size:1.4rem;height:40px;line-height:40px;display:block;color:orange;float:left;cursor:pointer;}.edit .editTop .editSecond{width:150px;height:40px;float:left}.edit .editTop .editSecond img{display:block;margin-top:10px;float:left;cursor:pointer;}.edit .editTop .editSecond span{height:40px;line-height:40px;display:block;float:left;}.edit .editTop .editSecond span a{color:#7D7D7D;padding:0 10px}.edit .editTop .editThree{width:840px;height:40px;float:left}.edit .editTop .editThree a{color: #7D7D7D;float:right;margin-right:2px;margin-top:10px;display:block;width:54px;font-size:1.2rem;cursor:pointer}.edit .editDetail  figure{float:left;width:160px;height:284px;float:left;border:1px solid blue;margin-left:33px;position:relative}.edit .editDetail  figure  .hide{width:100%;height:240px;z-index:1;position:absolute;left:0px;top:0px;color:#fff;font-size:1.2rem;background:rgba(0,0,0,.25);visibility:hidden}.edit .editDetail  figure  .hide  img{margin-left:16px;margin-top:10px}.edit .editDetail  figure  .hide  label{position:absolute;right:33px;top:28px;}.edit .editDetail  figure  .hide  .hideUl li{margin:0 0 15px 20px}.edit .editDetail  figure figcaption {width:130px;-webkit-line-clamp:2;text-align:center;margin-left:15px;display: -webkit-box;-webkit-box-orient:vertical;overflow:hidden;}.edit .editDetail  figure figcaption a{color:#7D7D7D}.edit .editDetail  figure figcaption a:hover{color:#0000FF}.edit .editDetail  figure:hover .hide{visibility: visible;}  </style>  </head><body><div class="edit"><div class="editTop"><div class="editFirst"><img src="../img/3.png" alt=""/><span>小编推荐</span></div><div class="editSecond"><img src="../img/2.png" alt="" /><span><a href="#">换一批</a></span></div><div class="editThree"><a href="#">更多></a></div></div><div class="editDetail"><figure><div class="show" ><a href="#"><img src="../img/1.png" alt=""/></a><a href="#" class="one"><div class="hide"><img src="../img/4.png" alt="" /><label>萝莉</label><ul class="hideUl"><li>字数：12345</li><li>点击：12345</li><li>收藏：12345</li><li>打赏：12345</li></ul></div></a></div><figcaption><a href="#"/>你的愿望，我确实听见了</a></figcaption></figure>    <figure><div class="show" ><a href="#"><img src="../img/1.png" alt=""/></a><a href="#" class="one"><div class="hide"><img src="../img/4.png" alt="" /><label>萝莉</label><ul class="hideUl"><li>字数：12345</li><li>点击：12345</li><li>收藏：12345</li><li>打赏：12345</li></ul></div></a></div><figcaption><a href="#"/>你的愿望，我确实听见了</a></figcaption></figure><figure><div class="show" ><a href="#"><img src="../img/1.png" alt=""/></a><a href="#" class="one"><div class="hide"><img src="../img/4.png" alt="" /><label>萝莉</label><ul class="hideUl"><li>字数：12345</li><li>点击：12345</li><li>收藏：12345</li><li>打赏：12345</li></ul></div></a></div><figcaption><a href="#"/>你的愿望，我确实听见了</a></figcaption></figure>    <figure><div class="show" ><a href="#"><img src="../img/1.png" alt=""/></a><a href="#" class="one"><div class="hide"><img src="../img/4.png" alt="" /><label>萝莉</label><ul class="hideUl"><li>字数：12345</li><li>点击：12345</li><li>收藏：12345</li><li>打赏：12345</li></ul></div></a></div><figcaption><a href="#"/>你的愿望，我确实听见了</a></figcaption></figure>    <figure><div class="show" ><a href="#"><img src="../img/1.png" alt=""/></a><a href="#" class="one"><div class="hide"><img src="../img/4.png" alt="" /><label>萝莉</label><ul class="hideUl"><li>字数：12345</li><li>点击：12345</li><li>收藏：12345</li><li>打赏：12345</li></ul></div></a></div><figcaption><a href="#"/>你的愿望，我确实听见了</a></figcaption></figure>    <figure><div class="show" ><a href="#"><img src="../img/1.png" alt=""/></a><a href="#" class="one"><div class="hide"><img src="../img/4.png" alt="" /><label>萝莉</label><ul class="hideUl"><li>字数：12345</li><li>点击：12345</li><li>收藏：12345</li><li>打赏：12345</li></ul></div></a></div><figcaption><a href="#"/>你的愿望，我确实听见了</a></figcaption></figure></div></div></body></html>

源码分析：发现有6组相同的figure部分。想要效果就是分别单击每一部分figure，可以把隐藏的.hide显示。

首先来看：jQuery方法

$(document).ready(function(){$('.show').on('mouseover', function(e) {$(this).find(".hide").css("visibility","visible");//= =display:block;});$('.show').on('mouseout', function(e) {$(this).find(".hide").css("visibility","hidden");//= =display:none;});});

至于display:none与visibility:hidden的区别，大家可以查询资料获得。

jQuer方法确实够简单，很容易实现了效果。但是还有没有更优秀的方法呢，有那就是-css。

只需要给它的父类添加移入移出效果即可。

代码如下：

.edit .editDetail  figure:hover .hide{visibility: visible;}/*display:block,更好*/

是不是很简单。但要注意一点，一定要把隐藏部分包起来，否则效果是每组都一起移入移出。这很显然并不是我们想要的效果。

最后，还是区分一下“display:none与visibility:hidden”

visibility和display两个属性都有隐藏元素的功能，display:none和visibility:hidden的区别，简单的总结一句话就是：visibility:hidden隐藏，但在浏览时保留位置；而display:none视为不存在，且不加载！

1、visibility:hidden--为隐藏的对象保留其物理空间

HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

2、display: none--不为被隐藏的对象保留其物理空间

HTML元素（对象）的宽度、高度等各种属性值都将“丢失”

至于问题1、2相信在实现效果的过程中你已经找到答案。希望这篇文章对前端初学者可以提供帮助。

阅读全文

0 0