常见鼠标移入-隐藏内容-显示效果

最新推荐文章于 2023-05-29 14:58:12 发布

iteye_6992

最新推荐文章于 2023-05-29 14:58:12 发布

阅读量116

点赞数

分类专栏： jquery 文章标签： jquery ViewUI

jquery 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
*{
margin:0;
padding:0;
}
body{
margin-left:20px;
margin-top:20px;
}
ul{
list-style:none;
}
#out_div{
border:1px solid #000;
width:200px;
height:225px;
padding:10px 20px;
}
h3{
padding-bottom:5px;
}
li{
border-bottom:1px solid #000;
padding-bottom:5px;
}
.t{
display:none;
}
.a{
display:block;
}
p{
padding-top:3px;
line-height:20px;
}
em{
text-align:right;
padding-top:2px;
}
h4{
padding-top:5px;
}
</style>
</head>

<body>
<div id="out_div">
<h3>大标题</h3>
<ul>
     <li>
     <h4>1标题</h4>
  <p class="a">内容内容内容内容内容内容内容内容</p>
  <em class="a">下标小标</em>
</li>
<li>
     <h4>2标题</h4>
  <p class="t">内容内容内容内容内容内容内容内容</p>
  <em class="t">下标小标</em>
</li>
<li>
     <h4>3标题</h4>
  <p class="t">内容内容内容内容内容内容内容内容</p>
  <em class="t">下标小标</em>
</li>
<li>
     <h4>4标题</h4>
  <p class="t">内容内容内容内容内容内容内容内容</p>
  <em class="t">下标小标</em>
</li>
<li style="border-bottom:none">
     <h4>5标题</h4>
  <p class="t">内容内容内容内容内容内容内容内容</p>
  <em class="t">下标小标</em>
</li>
</ul>
</div>
<script type="text/javascript">
/*
* 方法1
* 常见鼠标移入隐藏内容显示效果；
* ****made by keimon *******
* ******2013-01-17********
*/
$(function(){
   var len = $('li').length;
   for(var i=0; i<len; i++){
      $('li').eq(i).hover(function(){
      var that = $(this);
   $('p').add($('em')).removeClass('a').addClass('t');
   that.find('p').add(that.find('em')).addClass('a');
   })
   }
})

//方法2
/*
$(function(){
   var len = $('li').length;
   for(var i=0; i<len; i++){
      $('li').eq(i).hover(function(){
      var that = $(this);
   var index = $('li').index(that);
   var $p = that.siblings('li').find('p');
   var $em = that.siblings('li').find('em');
   $p.add($em).removeClass('a').addClass('t');
   that.find('p').add(that.find('em')).addClass('a');
   })
   }
})

*/
</script>
</body>
</html>