Question

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

我做到了，但是现在我想出现/消失只能在你正在盘旋的面板中工作，而不是在所有。现在正在申请，因为在jquery代码中有相同的类，所以show / hide效果适用于所有面板。每个面板都有一个唯一的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>

感谢。

Answer 1

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

就像你可以在当前面板中找到图标.. $(this).find('.glyphicon-edit.yellow')或者你想要添加课程的任何内容而不是$('.glyphicon-edit.yellow')

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

1 个答案: