html - 带有CSS3和HTML的有效颜色

我的模板上出现了激活色，我已经使用了此模板http://codepen.io/suez/pen/XJGOyL

如何激活菜单，例如单击其他未激活的菜单时。这该怎么做？

这是我的代码：

//HTML
<div class="demo__content">
<h2 class="demo__heading">What do you need help with?</h2>
<div class="demo__elems">

    <div class="demo__elem demo__elem-1">With advertising online</div>
    <div class="demo__elem demo__elem-2">With a website</div>
    <div class="demo__elem demo__elem-3">I need help with both</div>

    <span class="demo__hover demo__hover-1"></span>
    <span class="demo__hover demo__hover-2"></span>
    <span class="demo__hover demo__hover-3"></span>

    <div class="demo__highlighter">
        <div class="demo__elems">
            <div class="demo__elem">With advertising online</div>
            <div class="demo__elem">With a website</div>
            <div class="demo__elem">I need help with both</div>
        </div>
    </div>

</div>

//CSS
 .demo__hover-2 {
      top: 7rem;
    }
    .demo__hover-2:hover ~ .demo__highlighter {
      -webkit-transform: translateY(7rem);
      transform: translateY(7rem);
    }
    .demo__hover-2:hover ~ .demo__highlighter .demo__elems {
      -webkit-transform: translateY(-7rem);
      transform: translateY(-7rem);
    }
    .demo__hover-3 {
      top: 14rem;
    }
    .demo__hover-3:hover ~ .demo__highlighter {
      -webkit-transform: translateY(14rem);
      transform: translateY(14rem);
    }
    .demo__hover-3:hover ~ .demo__highlighter .demo__elems {
      -webkit-transform: translateY(-14rem);
      transform: translateY(-14rem);
    }
    .demo__elem a:active, a:hover, a:focus {
      text-decoration: none;
      outline: none;
    }

最佳答案

如果您能够在代码中使用jQuery，则可以通过向菜单的选定元素中添加“活动”类来实现。

例如

$(".demo__elem").click(function() {
  $(".demo__elem").removeClass("active"); // remove active from all
  $(this).addClass("active"); // add active to this
});

并且您的“活动” css也应设置样式。

关于html - 带有CSS3和HTML的有效颜色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37567815/