让hss上的css对象更改并单击

时间:2015-01-17 01:12:49

标签: javascript jquery html css onclick

我的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,所以如果那就是它必须的,我很好。

4 个答案:

答案 0 :(得分:0)

如果没有太多上下文,请尝试以下代码。它会持续你的视觉状态:

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

答案 1 :(得分:0)

如果我没有错,你实际上从元素上方移除了鼠标后,它确实撤回了:悬停效果...... 尝试删除:active和:visited

答案 2 :(得分:0)

如果使用jQuery是一个选项,则以下设置font-size并删除转换:

$(".exploreheadings").click(function () {
    $(this).css({
        "transition": "none",
        "font-size": "50px"
    });
});
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
    <li class="exploreheadings">people</li>
    <li class="exploreheadings">hashtags</li>
    <li class="exploreheadings">businesses</li>
</ul>

更新:在点击另一个li后,将其他li元素更改回30px字体大小,按照toggleClass()方法和另一个类active进行复制类exploreheadings,调整后的字体大小为50px,没有转换:

 $(document).ready(function () {
      $("li").click(function () {
          $("li.active").toggleClass("exploreheadings active");
          $(this).toggleClass("exploreheadings active");
      });

  });
.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;
}
.active {
    border-bottom: 1px solid black;
    display: inline-block;
    width: 350px;
    padding-bottom: 3px;
    display: inline;
    list-style-type: none;
    font-size: 50px;
}
.exploreheadings:hover {
    font-size: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
    <li class="exploreheadings">people</li>
    <li class="exploreheadings">hashtags</li>
    <li class="exploreheadings">businesses</li>
</ul>

答案 3 :(得分:0)

您正在使用的两个伪类(:active和:visited)仅适用于a个元素。 将以下a元素添加到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>

然后将CSS更改为a元素上的样式链接状态,而不是li元素:

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

**编辑澄清虽然:hover与其他元素一起使用,:active:visited仅适用于a元素。