Naddyson's questions

为什么，当我出错时，Webpack 并没有指出问题出在哪个文件，而只是指向 bundle.js？

Webpack 版本 3.8.1

我正在使用 Bootstrap 3。页面需要响应，即使每行有两列，我也需要它才能工作。展开第三列时，它可以正常工作。

var main = function() {
  $(".panel-heading").click(function() {
    $(this).siblings(".panel-body").slideToggle(240);
  });

}
$(document).ready(main);

.panel-container {
  padding: 5px !important;
}
.container {
  height: 100%;
}
.panel-body {
  display: none;
}
.panel-heading:hover {
  cursor: pointer;
}

<div class="panel-container col-lg-4">
  <div class="panel panel-default">
    <div class="panel-heading">
      Head panel
    </div>
    <div class="panel-body">
      Content...
    </div>
  </div>
</div>

将鼠标移到元素内的文本上（文本放置在单独的 div 中）会以非常快的 mouseenter 重复触发，但您希望它只触发一次，即在不对子元素做出反应的情况下进入方形块时触发。 JavaScript 代码：

$('.square').mouseenter(function (){
    var color = colorGenerator();
    (this).style.backgroundColor=color;
    $(this).children('.text').remove();
    $('<div>').addClass('text').appendTo(this).text(color);

CSS 代码：

.square {
width: 100px; height: 100px;
float:left;
background-color: white;
color:white;
text-align: center;
font-size:20px;
display: table;

}
.text{
text-align: center;
display: table-cell;
vertical-align: middle;

}
.square:hover {
box-shadow: 0px 0px 20px #F0FFF0 inset;
text-align: center;
vertical-align: middle;
color:white;
}

HTML 代码：

<div class="container">
    <div class="title-text">RANDOM COLOR</div>
    <div class="workspace">
        <div class="square">
            <div class="text"></div>
        </div>
    </div>
</div>

当将鼠标悬停在一个块上时，我希望它从各个方面都突出显示，但这不起作用，因为相邻的块叠加在突出显示上（在下图和左侧的图片中）。

#square {
  width: 100px;
  height: 100px;
  float: left;
  background-color: red;
}
#square:hover {
  box-shadow: 0px 0px 10px #F0FFF0;
}
#workspace {
  width: 800px;
  height: 1200px;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
}

<div id="workspace">
  <div id="square"></div>
  <div id="square"></div>
  <div id="square"></div>
  ...
  <div id="square"></div>
  <div id="square"></div>
</div>