Question

在下面的代码中，当我将div放在类thumb-bar上时，我编写的JavaScript起作用了，但是如果将它放在full-img div标记后，则CSS属性也将不起作用cursor: pointer div的thumb-bar未应用。

编辑-我的意思是我使用JavaScript应用的点击侦听器无法正常工作

CSS：

body {
  width: 640px;
  margin: 0 auto;
}

.full-img {
  position: relative;
  display: block;
  width: 640px;
  height: 480px;
}

button {
  border: 0;
  background: rgba(150, 150, 150, 0.6);
  text-shadow: 1px 1px 1px white;
  border: 1px solid #999;
  position: absolute;
  cursor: pointer;
  top: 2px;
  left: 2px;
}

.thumb-bar img {
  display: block;
  width: 20%;
  float: left;
  cursor: pointer;
}

HTML：

<div class="thumb-bar"></div>
  <div class="full-img">
    <img class="displayed-img" src="images/pic1.jpg">
    <button class="dark">Darken</button>
  </div>

JavaScript：

var displayedImage = document.querySelector('.displayed-img');
var thumbBar = document.querySelector('.thumb-bar');

btn = document.querySelector('button');
var overlay = document.querySelector('.overlay');

for (var i = 1; i <= 5; i++) {
  var newImage = document.createElement('img');
  newImage.setAttribute('src', 'images/pic' + i + '.jpg');
  thumbBar.appendChild(newImage);
  newImage.addEventListener('click', function(e) {
    displayedImage.setAttribute('src', e.target.getAttribute('src'))
  });
}

Answer 1

由于浮动.thumb-bar img，这些图像从页面流中取出，导致.thumb-bar元素的高度为0，这又导致后续内容不会被推送下。这意味着.full-img元素将呈现在图像的顶部，并使其从鼠标指针中消失。

您需要清除浮点数才能使.full-img元素呈现在浮点数下方。可以通过确保.thumb-bar清除其自身内容来完成此操作：

.thumb-bar {
  overflow: hidden;
}

...或使.full-img元素本身清除它们：

.full-img {
  clear: both;
}

JavaScript和CSS无法正常工作

1 个答案: