Question

Jquery 相同class div 怎么判断鼠标经过哪个并显示里面的隐藏层

<div class="address"><div class="con"><div class="addr-action"><a class="addr-edit">编辑</a><a class="addr-delete">删除</a></div></div></div>
<div class="address"><div class="con"><div class="addr-action"><a class="addr-edit">编辑</a><a class="addr-delete">删除</a></div></div></div>
<div class="address"><div class="con"><div class="addr-action"><a class="addr-edit">编辑</a><a class="addr-delete">删除</a></div></div></div>

class="addr-action"默认是隐藏的
鼠标经过 class="address" 显示这个DIV下面的 class="addr-action"层

Jquery要怎么写

Answer 1

思路：使用hover()函数监测鼠标经过事件，在hover()的处理函数内$(this)即表示当前处理的对象，也就是当前鼠标经过的class。然后使用toggle()函数实现内层元素在显示和隐藏之间切换。核心代码示例：

$("div.outer").hover(function() {

    $(this).find(".inner").toggle();  // 

}, function() {

    $(this).find(".inner").toggle();

});

下面进行一个实例演示:

1、HTML结构

<div class="outer"><div class="inner">我是隐藏1</div></div>

<div class="outer"><div class="inner">我是隐藏2</div></div>

2、jquery代码

$(function(){

    $("div.inner").hide(); // 默认隐藏所有内层元素

    $("div.outer").hover(function() {  // 鼠标经过事件

        $(this).find(".inner").toggle();  // 切换显示和隐藏

    }, function() {

        $(this).find(".inner").toggle();  // 切换显示和隐藏

    });

});

3、效果演示

Answer 2

$(".address").mouseover(function(){
    $(this).find(".addr-action").show();
});

Answer 3

<script>
jQuery(function(){
  $(".address").hover(function(){
    $(this).find(".addr-action").toggle();
  },function(){
    $(this).find(".addr-action").toggle();
  });
});
</script>

Answer 4

$('.address').hover(function(){
$(this).find('.addr-action').show();
})