JavaScript和CSS无法按预期工作

在下面的代码中，当我使用class

thumb-bar

放置div时，我编写的JavaScript可以工作，但是如果在

full img

div标记之后使用它，它也不能工作

thumb-bar

div的CSS属性

cursor:pointer

---

编辑-我的意思是我使用JavaScript应用的单击侦听器不工作

CSS:

HTML:

变暗

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'))
  });
}

var displayedImage=document.querySelector（'.displayedImage'）；
var thumbBar=document.querySelector（'.thumbBar'）；
btn=document.querySelector（'button'）；
var overlay=document.querySelector（'.overlay'）；
对于（var i=1；i因为您是浮动的
.thumb bar img
，这些图像从页面流中取出，这导致
.thumb
元素的高度为0，从而导致后续内容不会被向下推。这意味着
.full img
元素呈现在图像的顶部并遮住从鼠标指针中删除它们

您需要清除浮动，以获得要在其下方渲染的
.full img
元素。这可以通过确保
.thumb-bar
清除其自身内容来完成：

.thumb-bar {
  overflow: hidden;
}

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

.full-img {
  clear: both;
}

你认为选择器
.thumb bar img
是什么意思？我正在使用Javascript添加图像。我忘记了。呵呵，我有点生疏了。@user678413请接受这个答案。
.thumb-bar {
  overflow: hidden;
}

.full-img {
  clear: both;
}