Html 带有不透明度翻转的简单css图像开关

请参阅以下代码笔：

正如您所看到的，该函数根据您选择的缩略图交换较大的图像。此时，如果将鼠标悬停在任一缩略图上，则不透明度将更改如下：

.button:hover {
  opacity: 0.8
}

---

我试图实现的是，所选缩略图接收并保持在“不透明度悬停状态”-以指示其较大的对应项现在正在显示，反之亦然。所以我不想要悬停状态，我想要一个“选定的”不透明度效果。

在id

imageSRC上设置
opacity:0.8

#imageSRC,
.button:hover {
  opacity: 0.8
}


更新

如果不使用Jquery，请使用以下命令：

HTML

  <img id="imageSRC" src="http://bonrouge.com/wine.jpg" id="wine" height="500" width="300" alt="">

  <a href="#" onClick="switchImg('http://bonrouge.com/wine.jpg', this)" class="button">
    <img src="http://bonrouge.com/wine.jpg" height="100" width="100" alt="">
  </a>

  <a href="#" onClick="switchImg('http://bonrouge.com/beer.jpg', this)" class="button">
    <img src="http://bonrouge.com/beer.jpg" height="100" width="100" alt="">
  </a>

CSS

function switchImg(i, self) {
  document.getElementById("imageSRC").src = i;
  removeSelectedThumbnail();
  self.classList.add("selectedThumbnail");
}

function removeSelectedThumbnail() {
  var elems = document.querySelectorAll("a.button");
  [].forEach.call(elems, function(el) {
    el.className = el.className.replace(/\bselectedThumbnail\b/, "");
  });
}

.button:hover,
.selectedThumbnail {
  opacity: 0.8
}

因此，在每次切换中，我们都会向选定的缩略图添加一个类名
selectedThumbnail
，并为css中的特定类定义其不透明度


更新：
要使所选缩略图在页面加载时具有不透明度，请将
selectedThumbnail
类添加到所选缩略图

e、 g



在id
imageSRC

#imageSRC,
.button:hover {
  opacity: 0.8
}


更新

如果不使用Jquery，请使用以下命令：

HTML

  <img id="imageSRC" src="http://bonrouge.com/wine.jpg" id="wine" height="500" width="300" alt="">

  <a href="#" onClick="switchImg('http://bonrouge.com/wine.jpg', this)" class="button">
    <img src="http://bonrouge.com/wine.jpg" height="100" width="100" alt="">
  </a>

  <a href="#" onClick="switchImg('http://bonrouge.com/beer.jpg', this)" class="button">
    <img src="http://bonrouge.com/beer.jpg" height="100" width="100" alt="">
  </a>

CSS

function switchImg(i, self) {
  document.getElementById("imageSRC").src = i;
  removeSelectedThumbnail();
  self.classList.add("selectedThumbnail");
}

function removeSelectedThumbnail() {
  var elems = document.querySelectorAll("a.button");
  [].forEach.call(elems, function(el) {
    el.className = el.className.replace(/\bselectedThumbnail\b/, "");
  });
}

.button:hover,
.selectedThumbnail {
  opacity: 0.8
}

因此，在每次切换中，我们都会向选定的缩略图添加一个类名
selectedThumbnail
，并为css中的特定类定义其不透明度


更新：
要使所选缩略图在页面加载时具有不透明度，请将
selectedThumbnail
类添加到所选缩略图

e、 g



您的意思是所选缩略图应具有
不透明度：1
还是应具有
不透明度：0.8
？所选缩略图应具有不透明度，ie 0.8，如果您滚下，它将保持在该状态您是说选定的缩略图应具有
不透明度：1
还是应具有
不透明度：0.8
？选定的缩略图应具有不透明度，ie 0.8，如果您滚下，它将保持在该状态不透明度应位于选定的缩略图上是的，上面的代码应执行此任务。或者，无论是否处于悬停状态，未选中的缩略图都不具有不透明度？按照您的方式，您可以使大图像获得不透明度。我希望大图像是不透明的：1。不透明度只是在小图像/缩略图上显示-向用户显示正在显示的大图像…因此，如果我单击右侧的小图像，小图像将获得不透明度。8，大图像将更改为所选图像。小图像保持不透明度状态-除非您选择左侧的小图像-然后该图像将显示大图像，而左侧的小缩略图现在将具有不透明度。这要好得多，我一直在寻找的效果-只有一件事：当页面加载时，我需要所选大图像的缩略图已经具有不透明度，（因为它已经被选中了）。@RobertSheppard太棒了！很高兴它有帮助。不透明度应该在选定的缩略图上。是的，上面的代码应该完成这项工作。或者，无论是否处于悬停状态，未选中的缩略图都不具有不透明度？按照您的方式，您可以使大图像获得不透明度。我希望大图像是不透明的：1。不透明度只是在小图像/缩略图上显示-向用户显示正在显示的大图像…因此，如果我单击右侧的小图像，小图像将获得不透明度。8，大图像将更改为所选图像。小图像保持不透明度状态-除非您选择左侧的小图像-然后该图像将显示大图像，而左侧的小缩略图现在将具有不透明度。这要好得多，我一直在寻找的效果-只有一件事：当页面加载时，我需要所选大图像的缩略图已经具有不透明度，（因为它已经被选中了）。@RobertSheppard太棒了！很高兴这有帮助。