JQuery切换显示的效果，一句话搞定

最新推荐文章于 2022-09-23 19:25:52 发布
转载 最新推荐文章于 2022-09-23 19:25:52 发布 · 867 阅读 · 0

本文介绍了一种使用JQuery实现的悬停效果，当鼠标悬停在指定元素上时，显示相关信息，移开鼠标则隐藏这些信息。该效果通过JQuery的hover方法结合find方法实现，适用于展示额外信息或评论等场景。

JQuery真的太强大了，真好看！

Jquery代码如下：

 $(function () {
       $(".n_zyb_gzright .n_zyb_gzrightlist").hover(function () {
       $(this).find(".n_zyb_gzrightlistc").show().parent().siblings().find(".n_zyb_gzrightlistc").hide();
    })
})

Html代码如下：

<div class="n_zyb_gzright">        
                            <div class="n_zyb_gzrightlist">
                                <a target="_blank" class="a1" href="/Media/PlayMedia/212.shtml" title="我们都能幸福着">
                                    我们都能幸福着</a> <a class="" href="javascript:void(0)">人气：<font>1</font></a>
                                <div class="clear">
                                </div>
                                <div style="display:block" class="n_zyb_gzrightlistc">
                                    <div class="index_zx_img_left">
                                        <a target="_blank" href="/User/ShowInfo/220">
                                            <img src="http://resource.yiba.com/Avatar/2012113010521695319512.gif"></a></div>
                                    <div class="n_zpcen_ti">
                                        <a target="_blank" href="/User/ShowInfo/220">jstu001</a><br>
                                        <a target="_blank" class="n_zpa" href="/User/ShowInfo/220">
                                            作品：<span>18</span></a>&nbsp;&nbsp;</div>
                                    <div class="clear">
                                    </div>
                                </div>
                            </div>
                            <div class="n_zyb_gzrightlist">
                                <a target="_blank" class="a1" href="/Media/PlayMedia/232.shtml" title="开心就好了。">
                                    开心就好了。</a> <a class="" href="javascript:void(0)">人气：<font>1</font></a>
                                <div class="clear">
                                </div>
                                <div style="display:none" class="n_zyb_gzrightlistc">
                                    <div class="index_zx_img_left">
                                        <a target="_blank" href="/User/ShowInfo/221">
                                            <img src="http://resource.yiba.com/Avatar/2013011410552810013828.jpg"></a></div>
                                    <div class="n_zpcen_ti">
                                        <a target="_blank" href="/User/ShowInfo/221">jteacher001</a><br>
                                        <a target="_blank" class="n_zpa" href="/User/ShowInfo/221">
                                            作品：<span>12</span></a>&nbsp;&nbsp;</div>
                                    <div class="clear">
                                    </div>
                                </div>
                            </div>
                            <div class="n_zyb_gzrightlist">
                                <a target="_blank" class="a1" href="/Media/PlayMedia/213.shtml" title="2131321">
                                    2131321</a> <a class="" href="javascript:void(0)">人气：<font>0</font></a>
                                <div class="clear">
                                </div>
                                <div style="display:none" class="n_zyb_gzrightlistc">
                                    <div class="index_zx_img_left">
                                        <a target="_blank" href="/User/ShowInfo/220">
                                            <img src="http://resource.yiba.com/Avatar/2012113010521695319512.gif"></a></div>
                                    <div class="n_zpcen_ti">
                                        <a target="_blank" href="/User/ShowInfo/220">jstu001</a><br>
                                        <a target="_blank" class="n_zpa" href="/User/ShowInfo/220">
                                            作品：<span>18</span></a>&nbsp;&nbsp;</div>
                                    <div class="clear">
                                    </div>
                                </div>
                            </div>
                    </div>

 每天进步一点点，一年累积的进步，你去好好想想吧！

您的支持是我最大的动力，如果你觉得还可以，请您给个”推荐“！

 


<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
Jlins
关注
女朋友要我教她CSS，我就写了这一篇长文，感动哭了？
超逸の学习技术博客
05-30 9964
女朋友她又要我教她CSS，这4w字长文够了吗？她会被感动到吗？
jQuery各种show/hide方式的性能测试
qiushengb的专栏
12-15 6000
<br />这篇文章是jQuery各种show/hide方式的性能测试。作者之所以测试这个源于Robert Duffy在San Francisco举行的jQuery大会上的一句话：“.hide()和.show()的执行速度会比直接改变css慢”。但由于未能找Robert Duffy问明原因，所以作者就自己去做了这个测试。下面的翻译并不是全文翻译，只节选了一些重点。 <br />用作测试的是一个含有100个div的HTML页面，div带有class和一些内容。为了排除掉寻找这些div所花费的时间，所以把选择器
JQuery Show()的几种效果 总有一种是你需要的
FruitHardCandy的专栏
09-17 1248
1 show()方法和hide()方法 $("selector").show()  从display:none还原元素默认或已设置的display属性$("selector").hide()  设置元素的display样式为none，等于$("selector").css("display","none") （注： 传入参数后，.show()和.hide()方法同时动画改...
9.jQuery动画切换效果
qq_34620296的博客
01-01 433
1.显示隐藏切换 show() hide() toggle() 2.滑动 slideDown() slideUp() slideToggle() 3.淡入淡出 fadeln() fadeOut() fadeToggle()切换 fadeTo("speed","opacity","easing",fn)透明度,其中速度和透明度必须写 ...
网页加载的不同的方式、点击按钮显示一句话、jQuery中获取元素的方法
Leon_Jinhai_Sun的博客
01-15 286
网页加载的不同的方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery-1.12.1.js"></script> &lt...
JQuery交替显示
shihuaxian的专栏
09-25 732
$(document).ready(function(){ var $category=$(ul li:gt(5):not(:last)); $category.hide(); var $toggleBtn = $(div.showmore > a); $toggleBtn.click(function(){ if($cate
jQuery中常用动画效果函数(日常整理)
10-21
主要介绍了小编日常收集整理的关于jQuery中常用动画效果函数的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
基于JQuery的一句话搞定手风琴菜单
10-27
3. CSS类的切换：通过切换类名来控制显示效果，这通常和CSS样式紧密相关，需要提前设计好相应的样式来配合jQuery脚本的执行。 4. toggle()方法的使用：这个方法可以切换元素的可见状态，通过传递'normal'参数，可以...
Jquery实现显示和隐藏的4种简单方式
01-19
使用jquery控制div的显示与隐藏，一句话就能搞定，例如： 1.$(“#id”).show()表示为display：block， $(“#id”).hide()表示为display:none; 2.$(“#id”).toggle()切换元素的可见状态。如果元素是可见的，切换为...
一句话理解Vue核心内容
热门推荐
crazy_banana的博客
05-02 1万+
理解“渐进式框架”
在jQuery中切换隐藏/显示
m0_63639281的博客
09-23 2185
在jQuery中切换隐藏/显示
js网页繁体简体转换（备忘）
weixin_30907523的博客
07-22 1316
用法：非得加上html头 utf-8编码 其它编码无测试 head 中引用 <script language='javascript' src='zh.js'></script> 再把以下代码放到合试的地方 <a href="javascript:zh_tran('s');" class="zh_click" id="zh_click_s"&gt...
jQuery实现图片的隐藏、显示、切换
a_sid的博客
12-06 1万+
<html> <head> <meta charset="utf-8"> <title></title> <script src="./jquery-2.2.4.min.js"></script> <script> $(function() { //获取按钮并设置点
jQuery 切换特效/动画效果
herogus的博客
04-11 1451
jQuery 切换特效/动画效果， jQuery获取 display的属性值
前端输出测试语句……（实用篇）
Alone_in_的博客
06-28 3665
javascript输出测试语句的三种方式（常用) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--将JS代码编写到script标签中--> <script type="text/j...
通过jQuery来输出html代码的技巧
码到家
11-01 8817
通过jQuery来输出html代码的技巧 形式一：直接输出标签元素 1.采用转义符号 var form1 = "<form id=\"myform\" method=\"post\">" +"<input type=\"text\" name=\"uname\" style=\"height:20px;width:100%;\" />"
使用jquery切换列表
Min的博客
08-02 1226
使用jquery进行列表的切换 （1）为代码添加css样式 （2）从第八条开始隐藏，当用户点击“显示全部品牌”的时候会显示隐藏的品牌（除了最后一条),并且进行文本的切换，高亮特定品牌。 （3）当用户点击“显示部分品牌”的时候会隐藏显示的品牌（除了最后一条),并且进行文本的切换，去除高亮。 $(function(){ var items=$('ul li:gt(6):n
jquery切换标签时的样式的变换
zhaozhanzhan的博客
03-29 835
在适应的项目应用当中，经常会有标签的切换时触发样式的选择，UI经常忙的不可开交，有时候项目太急，只能自己上阵，于是自己也总结一下期间遇到的问题，进行梳理，以便以后加深了解。       最终的实现效果如下：       效果图如上，重复点击时，相关的进行改变。      其中，任务、审批为一级菜单，对应的样式如下：              menu-wrap-title">  
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值