Question

当用户将鼠标悬停在面板上时，我想显示黄色正方形（这是一个引导程序的字形，但我不知道它为什么没有显示），并隐藏在用户离开面板的光标。主要类是.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')来定位元素，但我在这里是具体的。

Answer 2

至于基于悬停显示和隐藏元素，这里有一个css版本来完成此任务。我从你原来的问题中分出你的jsfiddle：

http://jsfiddle.net/a2z4p70k/

<div class="row hide-buttons-until-hover">
    <div class="col-xs-12 text-right">
      <button class="btn btn-success" href="#">
      Do Something
      </button>
    </div>
  </div>

和css：

.panel-body .hide-buttons-until-hover {
  visibility: hidden;
}

.panel-body:hover .hide-buttons-until-hover {
  visibility: visible;
}

（注意：在提交之前重新阅读之后，我注意到你的html / css与链接的原始问题有点不同。下面的代码适用于原始版本......）

在悬停面板上显示黄色方块

2 个答案: