javascript - 单击图像时，使 CSS 悬停内容保留在图像上

Question

我的问题与这个类似:How can you make CSS on-hover content stay in place when you click or stop hovering using Javascript?

但是，我不太理解所提出的解决方案。

所以基本上，我希望我的 CSS 悬停内容在用户点击它时停留在我的图像之上。有人可以告诉我该怎么做吗？

#core {
  max-width: 960px;
  margin-top: 25px;
}
ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
ul.img-list li {
  display: inline-block;
  height: 120px;
  margin: 0 1em 1em 0;
  position: relative;
  width: 120px;
}
span.background-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
ul.img-list li:hover span.background-content {
  opacity: 1;
}
span.background-content {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 120px;
  left: 0;
  position: absolute;
  top: 0;
  width: 120px;
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}
/* --------------------------------------------------------- */

span.title-content-platinum {
  background: rgba(215, 215, 0, 0.8);
  color: white;
  cursor: pointer;
  display: table;
  height: 20px;
  left: 0;
  position: absolute;
  top: -20px;
  width: 120px;
}
span.title-content-platinum span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
span.title-content-platinum {
  background: rgba(215, 215, 0, 0.8);
  color: white;
  cursor: pointer;
  display: table;
  height: 20px;
  left: 0;
  position: absolute;
  top: -20px;
  width: 120px;
  opacity: 0;
}
ul.img-list li:hover span.title-content-platinum {
  opacity: 1;
}
span.title-content-platinum {
  background: rgba(215, 215, 0, 0.8);
  color: white;
  cursor: pointer;
  display: table;
  height: 20px;
  left: 0;
  position: absolute;
  top: -20px;
  width: 120px;
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}

<div id="core">
  <ul class="img-list">
    <li>
      <a>
        <a href="">
          <img src="http://www.pokepedia.fr/images/thumb/e/e7/Pikachu-RFVF.png/120px-Pikachu-RFVF.png" alt="" width="120" height="120" />
        </a>
        <span class="title-content-platinum">Pikachu</span>
        <span class="background-content"><span></span></span>
      </a>
    </li>
  </ul>
</div>

我也在学习 Javascript(暂时没有 Jquery)，所以非常感谢涉及 jscript 的解决方案!

Answer 1

这是一个简单的示例，使用 JS 将 CSS 类添加到基于元素的 id。我使用 HTML onclick 属性调用一个 javascript 函数，并传入 HTML id 以查找元素并添加类。您应该能够调整它以将其应用到您的情况。

演示:http://jsfiddle.net/biz79/swxxLj3z/

更新:我已将其切换为 toggleClass，以便 click1 添加该类，而 click2 删除该类。此代码也应该能够处理具有不止 1 个类的标签。

您可以在 SO 上找到更优雅的解决方案，但是，这可能同时对您有用。

这看起来是个不错的资源:Change an element's class with JavaScript

无论如何，只需根据您的目的进行调整即可。干杯!

HTML:

<div id='d1' onclick="toggleClass('d1')" class="class1 class2">Hello</div>
<div id='d2' onclick="toggleClass('d2')">there</div>

JS:

function toggleClass( ID ) {
   var classToAdd = 'bigFont';
   var el = document.getElementById(ID);
   var classes = el.className;
   var index = classes.indexOf(classToAdd);

   if (index < 0) {
       el.className += " " + classToAdd;
   }
   else {
     classes = classes.replace(classToAdd, " ");
     el.className = classes;
   }
}  

CSS:

div:hover {
    font-size:2em;
}

.bigFont {
    font-size:2em;
}