问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

纯css实现点击特效

头像
一枚菜鸟
    13312945

    怎么用纯css实现和按钮一样的点击一次，然后改变样式？听说是用伪元素target，不过我不知道怎么操作

    css3
    阅读 33.5k
    7 个回答
    得票最新
    头像
    追梦子
      292612
      ✓ 已被采纳
      <style>
    #select{
        display:none;
    }
    .box{
        width:100px;
        height:100px;
        border:1px solid red;
        display:none;
    }
    #select:checked + .box{
        display:block;
    }
</style>
<label for="select">点我！</label>
<input type="checkbox" id="select">
<div class="box">盒子</div>

      也可以看一下这篇文章：CSS实现点击事件及实践http://www.cnblogs.com/pssp/p...

      头像
      nigelvon
        1.5k238

        点击过的链接可以 :visited 。

        头像
        StephenTian
          3.9k1620

          visited的方法前面的小伙伴已经讲了；那我还是帮你搞懂伪元素 target 的用法吧。学东西毕竟得踏踏实实，搞懂想要的再去学新的。
          :target伪选择器指定的ID匹配上时，它的样式就会在这个ID元素上生效。

          HTML:

          <h1 id="section1">Section 1</h1>

          CSS:

            :target {
    color: #afafaf;
}
h1:target {
    color: #f00;
}

          ID为”section1″的元素将会变红.

          头像
          weber_fan
            184413
            <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RunJS</title>
    <script id="others_canvastext_041" type="text/javascript" class="library" src="/js/sandbox/other/CanvasText-0.4.1.js"></script>
<style>div{color:#fff;height:80px;width:220px;background-color:#abcdef;line-height:80px;text-align:center;}
a:visited>div{
    background:#000;
}</style>
    </head>
    <body>
        <a href="#" >我是一个连接
        <div>
            我是一个DIV
        </div></a>
    </body>
</html>
            像这样用visited然后可以控制a的子元素的样式，+选择器不支持，只支持hover、active。
            头像
            生峰狼牙人
              42175063

              貌似没有类似jquery的toogleClass(不记得拼写了)的功能吧，不过，倒是input有个checked属性。你可以使用兄弟选择器来设置，比如input+label和input:checked+label来区分，但是，这个明显和你说的也不太一样，这个其实是通过获取焦点和失去焦点来判断的。实在不行就用JS吧

              头像
              say_hello_world
                52
                新手上路，请多包涵

                现在css只有hover visited 才能监听到鼠标滑动过的事件 要是点击改变样式 一般只能结合js来实现

                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题