Question

请参阅以下代码笔： http://codepen.io/kishoresahas/pen/epbjRm

function switchImg(i) {
  document.getElementById("imageSRC").src = i;
}

正如您所看到的，该功能会根据您选择的缩略图交换较大的图像。目前，如果您将鼠标悬停在任一缩略图上，则不透明度会发生如下变化：

.button:hover {
  opacity: 0.8
}

我想要实现的是，所选的缩略图代替接收并保持在不透明悬停状态＆＃39; - 表明其较大的对应物现在正在显示，反之亦然。所以我不想要一个悬停状态，我想要一个选择的＆＃39;不透明效果。

Answer 1

在ID opacity: 0.8

上设置imageSRC

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

Codepen

<强>更新

如果你没有使用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>

<强> JS

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/, "");
  });
}

<强> CSS

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

因此，在每个开关上，我们都会为选定的缩略图添加一个类名selectedThumbnail，并在css中为该特定类定义它的不透明度。

Fiddle

<强>更新：要在页面加载时让所选缩略图具有不透明度，请将selectedThumbnail类添加到所选的一个。

e.g。

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

Fiddle

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

1 个答案: