使圖像停留在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根據它的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; 
} 

Answer 2

你首先要修改你的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");\ 
    } 
}