Javascript 悬停并单击时获取要更改的css对象

我的css代码有问题，我希望列表项在单击后保持不变。这是我的CSS

.exploreheadings{
    border-bottom: 1px solid black;
    display: inline-block;
    width: 350px;
    padding-bottom: 3px;
    display: inline;
    list-style-type: none;
    font-size: 30px;
    -webkit-transition: font-size .7s;
    transition: font-size .7s;
}

.exploreheadings:hover{
    font-size: 50px;
}
.exploreheadings:active{
    font-size: 50px;
}

.exploreheadings:visited{
    font-size: 50px;
}

这是我的html

<ul>
    <li class="exploreheadings">people</li>
    <li class="exploreheadings">hashtags</li>
    <li class="exploreheadings">businesses</li>
</ul>

---

有什么方法可以让它保持不变吗？当我将鼠标悬停在它上面并单击它后，我尝试了访问的选择器，但没有用。我是编程界的新手，所以这可能是一个愚蠢的错误，但有人能帮我吗？我对使用jQuery也很熟悉，因此如果必须这样做，我也可以使用它。

如果没有太多上下文，请尝试以下代码。它将保持您的视觉状态：

<ul>
<li class="exploreheadings" onclick="setactive(this);">people</li>
<li class="exploreheadings" onclick="setactive(this);">hashtags</li>
<li class="exploreheadings" onclick="setactive(this);">businesses</li>
</ul>
<script>
function setactive(d){
  var os=d.parentNode.getElementsByTagName('li');
  for (var i=0;i<os.length;i++){
    var o=os[i];
    o.style.fontSize='30px';
  }
  d.style.fontSize='50px';
}
</script>

---

如果使用jQuery是一个选项，那么下面将设置字体大小并删除转换：

$.exploreheadings.clickfunction{ $this.css{ 过渡：无， 字体大小：50px }; }; .标题{ 边框底部：1px纯黑； 显示：内联块； 宽度：350px； 垫底：3件； 显示：内联； 列表样式类型：无； 字体大小：30px； -webkit转换：字体大小.7s； 转换：字体大小。7s； } .探索标题：悬停{ 字体大小：50px； } .标题：活动{ 字体大小：50px； } .exploreheadings:已访问{ 字体大小：50px； } 人 标签 企业

---

您正在使用的两个伪类：active和：visted仅在元素上工作。 将元素添加到HTML中，如下所示：

<ul>
   <li class="exploreheadings"><a href="#">people</a></li>
   <li class="exploreheadings"><a href="#">hashtags</a></li>
   <li class="exploreheadings"><a href="#">businesses</a></li>
</ul>

---

**编辑以澄清while:hover可用于其他元素，：active和：visted仅可用于元素。

是否使用javascript？没有什么可点击的…我没有使用javascript，但是有没有一种方法可以使用jQuery来解决这个问题，我认为：visted选择器可以工作。：visted应用于锚元素，而您没有锚元素。另外，如果不使用JavaScript，就不能使用jQuery：jQuery是JavaScript。我的意思是这里没有单击操作，因此单击时不会发生任何更改。是否有一个选择器可以影响列表项，与：visited？相同：hover在其他元素上工作得很好，而不是其他好的点。编辑回应以反映这一点。原始海报的代码并不特别有效，因为：visited仅适用于元素。

.exploreheadings a:hover {
    font-size: 50px;
}
.exploreheadings a:active {
    font-size: 50px;
}
.exploreheadings a:visited {
    font-size: 50px;
}