Question

我开始使用jQuery，我在以下场景中为孩子们进行切换：

<div id="id1">
  <heade>
    <div class="hideshow1"> Toggle this div </div>
    <div class="hideshow2"> Toggle this div </div>
    <h2> My Header </h2>
  </header>
  <div class="body1">
     This is my body 
   </div>
 </div>

 <div id="id2">
  <header>
    <div class="hideshow1"> Toggle this div </div>
    <div class="hideshow2"> Toggle this div </div>
    <h2> My Header </h2>
  </header>
  <div class="body1">
     This is my body 
   </div>
 </div>

我在这里尝试做的是在初始页面加载时隐藏所有class="hideshow1"和class="hideshow2"但不隐藏h2。但是当用户将指针悬停在id="id1"的任何部分上时，只会在相应div中显示class="hideshow1"和class="hideshow2"，并在删除指针时隐藏。

如果任何jQuery专家可以分享一些信息。

提前谢谢

Answer 1

您可以检查包装元素是否悬停，如果是，则显示其子项或者隐藏其子元素。

参考：hover，find和show / hide

代码：

$("#id1, #id2").hover(function () {
    $(this).find(".hideshow1, .hideshow2").show();
}, function () {
    $(this).find(".hideshow1, .hideshow2").hide();
})

演示：http://jsfiddle.net/IrvinDominin/53PgZ/

Answer 2

尝试这样的事情：

$('#id1, #id2').on('mouseenter mouseleave', function(e) {
    $('.hideshow1, .hideshow2', this).toggle(e.type == 'mouseenter');
});

演示：http://jsfiddle.net/n7Z7a/

Answer 3

你应该juste有1个类，这是＆＃34; hideshow＆＃34;，默认情况下是display：none。然后，在鼠标悬停时，显示当前元素。此外，您可以在一个类上绑定元素。像这样：

<div class="trigger">
  <heade>
    <div class="hideshow"> Toggle this div </div>
    <div class="hideshow"> Toggle this div </div>
    <h2> My Header </h2>
  </header>
  <div class="body1">
     This is my body 
   </div>
 </div>

 <div class="trigger">
  <header>
    <div class="hideshow"> Toggle this div </div>
    <div class="hideshow"> Toggle this div </div>
    <h2> My Header </h2>
  </header>
  <div class="body1">
     This is my body 
   </div>
 </div>

然后：

$('.trigger').on('mouseover', function(e) { $(this).children('hideshow').show(); }).on('mouseout',function(e) { $(this).children('hideshow').hide() });

希望有所帮助！

Answer 4

试试这个：

<强> HTML

<div id="id1">
  <header>
    <div class="hideshow1"> Toggle this div </div>
    <div class="hideshow2"> Toggle this div </div>
    <h2> My Header </h2>
  </header>
  <div class="body1">
     This is my body 
   </div>
 </div>

 <div id="id2">
  <header>
    <div class="hideshow1"> Toggle this div </div>
    <div class="hideshow2"> Toggle this div </div>
    <h2> My Header </h2>
  </header>
  <div class="body1">
     This is my body 
   </div>
 </div>

<强> JS

$(".hideshow1").hide();
$(".hideshow2").hide();


$('#id1').hover(
    function () {
         $(".hideshow1").show();
         $(".hideshow2").show();           
    },
    function () {
        $(".hideshow1").hide();
        $(".hideshow2").hide();           
    }
);

fiddle

Answer 5

一个非常简单的CSS解决方案（http://jsfiddle.net/8rk88/）：

.container .hideshow1, .container .hideshow2 {
    display: none;
}
.container:hover .hideshow1, .container:hover .hideshow2 {
    display: block;
}

Answer 6

我强烈建议不使用jQuery（或者根本就是JavaScript），而是使用CSS：

div.hideshow1,
div.hideshow2 {
    visibility: hidden;
}

div:hover div.hideshow1,
div:hover div.hideshow2 {
    visibility: visible;
}

JS Fiddle demo

当然，您可以使用display代替visibility，但请注意，这意味着会有一些中度不愉快的跳跃＆＃39;当内容出现/消失（JS Fiddle demo）。

如果你更喜欢稍微优雅的淡入/淡出方法，你可以实现过渡：

div.hideshow1,
div.hideshow2 {
    opacity: 0;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

div:hover div.hideshow1,
div:hover div.hideshow2 {
    opacity: 1;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

JS Fiddle demo

jQuery切换（隐藏/显示）子类

6 个答案:

演示：http://jsfiddle.net/n7Z7a/