Question

我想在芒果上的 click 上以绿色（bg颜色）而不是芒果以红色（bg颜色）显示苹果，我知道它是＆＃39; s可以使用 hover 或使用 javascript 。有没有办法在鼠标点击上使用 css 进行操作？

＆＃13;

#two
    {
        display:none;
    }
    #one
    {
      background-color :red;
    }

＆＃13;

 <html>
      <head>
       <link rel="stylesheet" type="text/css" href="hov.css">
      </head>
      <body>
        <div id="one">
          <p>mango</p>
        </div>
        <div id="two">
          <p>apple</p>
        </div>
     </body>
    </html>

＆＃13;

Answer 1

我认为您只能使用CSS执行您想要的操作，但您可以使用：active 选择器进行更改，同时点击它。

请参阅：http://www.w3schools.com/cssref/sel_active.asp

Answer 2

这取决于“点击”和“显示”的含义。

如果你的意思是你可以通过点击“芒果”div来切换“apple”div的外观，那么NO ...你需要javascript。

但是，如果您只想在点击鼠标按钮并按住时看到“芒果”div，那么伪类#two { display: none; background: green; } #one { background-color: red; } #one:active + #two { display: block; }就是您所需要的......与合适的兄弟选择器一起使用。

<div id="one">
  <p>mango [click and hold]</p>
</div>
<div id="two">
  <p>apple</p>
</div>

注意：此选择器仅适用于兄弟姐妹...它不会在{{1}}标记上影响“apple”div。

Answer 3

最好使用 js 进行点击。

仅CSS解决方案

这是使用css 创建点击功能的简单黑客攻击为此目的。使用checkbox和label进行简单的黑客攻击。

label { display: block; background: red; } label:after{ content: "Mango"; } #demo:checked + label { background: Green; color: white; } #demo:checked + label:after{ content: "Apple"; } .hide{ display:none; }

<input type="checkbox" id="demo" class="hide"/> <label for="demo"></label>

有没有可能用css做click事件？

3 个答案:

仅CSS解决方案