悬停时在每个面板中显示/隐藏图标答案

【问题标题】：Show/Hide icon in each panel on hover悬停时在每个面板中显示/隐藏图标
【发布时间】：2014-04-24 23:10:40
【问题描述】：

这是这个问题的第二部分：

我做到了，但现在我只想在您悬停的面板中出现/消失，而不是在所有面板中。现在全部应用，因为在 jquery 代码中具有相同的类，因此显示/隐藏效果适用于所有面板。每个面板都有一个唯一的 ID，所以我只想在您悬停的面板中显示/隐藏图标，而不是全部。（换句话说，我想做一个带有变量 id 的 jquery）。

更新代码： CSS：

.fyin {
    opacity: 1 !important;
   transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}
.fyout {
    opacity: 0 !important;
       transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}
.yellow {
 margin-left: 61px;
 opacity: 0;
    font-size: 20px;
    color: #FF8F00;
    text-shadow: 0px 1px 0px #fff;
}

jquery:

 $('.panel').mouseover(function () {
      $('.glyphicon-edit.yellow').removeClass( "fyout" );
    $('.glyphicon-edit.yellow').addClass( "fyin" );
});
$('.panel').mouseout(function () {
  $('.glyphicon-edit.yellow').removeClass( "fyin" );
    $('.glyphicon-edit.yellow').addClass( "fyout" );
});

HTML（我只展示了 4 个面板，但还有更多）：

  <div id="taskPanel" class="col-xs-6 col-sm-4 col-md-3">
    <div id="11" class="panel panel-off2">
      <div class="panel-heading">
        <div class="row">
          <div class="col-xs-1"><span class="glyphicon glyphicon-stop"></span></div>
      <div class="col-xs-8">Task 11</div>
    </div>
    </div>
    <div class="panel-body">
      <div class="row">
        <div class="col-xs-5">
          <button type="button" class="btn btn-default btn-xs" data-id="11">
            <span class="glyphicon glyphicon-edit"></span> Editar
          </button>
        </div>
        <div class="col-xs-2 col-xs-offset-2">

         <input data-size="mini" data-id="11" data-on-text="on" data-off-text="off" type="checkbox">

        </div>
      </div>
      <div class="row" style="margin-top:10px">  
        <div class="col-xs-12"><strong>Planning:</strong>&nbsp;0/10 * * * * ?</div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <strong>URI:</strong>&nbsp;/cron/test
        </div>
      </div>
    </div>
    </div>
  </div>

  <div id="taskPanel" class="col-xs-6 col-sm-4 col-md-3">
    <div id="12" class="panel panel-off2">
      <div class="panel-heading">
        <div class="row">
          <div class="col-xs-1"><span class="glyphicon glyphicon-stop"></span></div>
       <div style="float: left;margin-left: 15px;">Task 12</div>
 <div style="margin-left: 30px;width: 96%;">  <span class="glyphicon glyphicon-edit yellow"></span>
<div class="miniswitch">
    <input type="checkbox" data-id="12">
    <label><i class="glyphicon glyphicon-off"></i></label>
</div> 
  </div>
    </div>
    </div>
    <div class="panel-body">
      <div class="row">
        <div class="col-xs-5">
          <button type="button" class="btn btn-default btn-xs" data-id="12">
            <span class="glyphicon glyphicon-edit"></span> Editar
          </button>
        </div>

      </div>
      <div class="row" style="margin-top:10px">  
        <div class="col-xs-12"><strong>Planning:</strong>&nbsp;0/10 * * * * ?</div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <strong>URI:</strong>&nbsp;/cron/test
        </div>
      </div>
    </div>
    </div>
  </div>

  <div id="taskPanel" class="col-xs-6 col-sm-4 col-md-3">
    <div id="13" class="panel panel-success">
      <div class="panel-heading">
        <div class="row">
          <div class="col-xs-1"><span class="glyphicon glyphicon-stop"></span></div>
       <div style="float: left;margin-left: 15px;">Task 13</div>
     <div style="margin-left: 30px;width: 96%;">  <span class="glyphicon glyphicon-edit yellow"></span>
<div class="miniswitch">
    <input type="checkbox" data-id="13" checked>
    <label><i class="glyphicon glyphicon-off"></i></label>
</div> 
  </div>
    </div>
    </div>
    <div class="panel-body">
      <div class="row">
        <div class="col-xs-5">
          <button type="button" class="btn btn-default btn-xs" data-id="13">
            <span class="glyphicon glyphicon-edit"></span> Editar
          </button>
        </div>
        <div class="col-xs-2 col-xs-offset-2">

        </div>
      </div>
      <div class="row" style="margin-top:10px">  
        <div class="col-xs-12"><strong>Planning:</strong>&nbsp;0/10 * * * * ?</div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <strong>URI:</strong>&nbsp;/cron/test
        </div>
      </div>
    </div>
    </div>
  </div>

  <div id="taskPanel" class="col-xs-6 col-sm-4 col-md-3">
    <div id="14" class="panel panel-off2">
      <div class="panel-heading">
        <div class="row">
          <div class="col-xs-1"><span class="glyphicon glyphicon-stop"></span></div>
      <div class="col-xs-8">Task 14</div>
    </div>
    </div>
    <div class="panel-body">
      <div class="row">
        <div class="col-xs-5">
          <button type="button" class="btn btn-default btn-xs" data-id="14">
            <span class="glyphicon glyphicon-edit"></span> Editar
          </button>
        </div>
        <div class="col-xs-2 col-xs-offset-2">

         <input data-size="mini" data-id="14" data-on-text="on" data-off-text="off" type="checkbox">

        </div>
      </div>
      <div class="row" style="margin-top:10px">  
        <div class="col-xs-12"><strong>Planning:</strong>&nbsp;0/10 * * * * ?</div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <strong>URI:</strong>&nbsp;/cron/test
        </div>
      </div>
    </div>
    </div>
  </div>

谢谢。

【问题讨论】：

向我们展示您的更新代码

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

您不需要唯一的 ID。使用$(this) 选择您当前悬停的面板。

这样，您可以在当前面板中找到图标。$(this).find('.glyphicon-edit.yellow') 或您想要添加类的任何内容，而不是 $('.glyphicon-edit.yellow')

【讨论】：