使图像停留在CSS-悬停内容，当你点击它

我的问题是类似这样的：How can you make CSS on-hover content stay in place when you click or stop hovering using Javascript?使图像停留在CSS-悬停内容，当你点击它

然而，我没有很好地理解，提出了解决方案。

所以基本上，我希望我的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的解决方案，将不胜感激！

来源

2014-10-02 Macjeje

你的意思是，一旦你悬停，你想要的跨度覆盖住可见，即使你的时候unhover？ – showdev 2014-10-02 18:07:09

我希望跨度覆盖保持可见的onclick并保持这种方式，直到我再次点击图像。 – Macjeje 2014-10-02 18:11:05

下面是一个简单的例子，用JS根据它的id向一个元素添加一个CSS类。我使用HTML onclick属性来调用一个javascript函数，并传入HTML id来查找元素并添加该类。你应该能够调整这个以适用于你的情况。

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

更新：让CLICK1添加类和CLICK2删除类，我就切换到toggleClass。该代码应该能够处理具有多于一个类的标签。

还有更优雅的解决方案，您可以查看，但是，这可能会在此期间为您工作。

这看起来像一个很好的资源：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; 
}

来源

2014-10-02 18:08:35 Will

谢谢，有没有办法通过再次点击“there”来恢复原始字体？ – Macjeje 2014-10-02 18:18:23

删除课程实际上有点难，但可以实现。你需要支持ie8或9之类的浏览器吗？此外，跨度上会有其他类吗？ – Will 2014-10-02 18:20:49

我不介意如果老版本ie不支持。跨度不会有其他类。 – Macjeje 2014-10-02 18:22:53

你首先要修改你的CSS采取这一表示的项目是否有一个类被点击这里我使用'.active-item'

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

    opacity: 1; 
}

那么你想申请使用element.setAttribute（）活动项目类，像这样

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

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

来源

2014-10-02 18:11:49 Henry

使图像停留在CSS-悬停内容，当你点击它

回答

相关问题