Question

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

但是，我对提出的解决方案并不了解。

所以基本上，我希望我的CSS on-hover内容在用户点击时保持在我的图像之上。有人可以告诉我怎么做吗？

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

我也在学习Javascript（目前还没有Jquery），所以我们非常感谢一个涉及jscript的解决方案！

Answer 1

这是一个使用JS根据它的id向元素添加CSS类的简单示例。我使用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;
}

Answer 2

您首先要修改自己的css，以获取一个表示是否已单击某个项目的类我在这里使用'.active-item'

ul.img-list li:hover span.background-content, 
.active-item span.background-content
{

    opacity: 1;
}

然后你想要使用element.setAttribute（）来应用active-item类

var items = document.getElementByTagName("li");

for (index = 0; index < items.length; ++index) {
    items[index].onmouseclick = function() {
        items[index].setAttribute("class", "active-item");\
    } 
}

单击图像上的CSS on-hover内容

2 个答案: