jquery - 在悬停面板上显示黄色方 block

Question

我想在用户悬停面板时显示黄色方 block (这是 bootstrap 的一个字形，但我不知道为什么不显示)，并在用户离开面板的光标时隐藏。主类是.panel。

面板的结构:

  <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>

JSFiddle:http://jsfiddle.net/3yRhD/

Answer 1

给你 - http://jsfiddle.net/jayblanchard/3yRhD/2/

$('.panel').mouseover(function () {
    $(this).find('.glyphicon-edit.yellow').css({
        'background': '#FFFF00'
    });
});
$('.panel').mouseout(function () {
    $(this).find('.glyphicon-edit.yellow').css({
        'background': 'transparent'
    });
});

自然地，您可以只针对具有黄色类的元素，.find('.yellow')，但我在这里很具体。