Question

有没有办法模仿“unlick”＆＃39;只有CSS的事件？我能够模仿“点击”。通过具有时间延迟值的过渡属性。该操作会保持很长时间，就像单击该按钮一样。如何使这个元素“未被点击”，或者将其缩回到原始状态？例如，有没有办法点击屏幕上的其他地方并让.sidebar（请参阅附带的代码）未被点击＆＃39;？

＆＃13;

.sidebar > p {
  background: blue;
  width: 15em;
  -webkit-transition: all 0s 1000s;
  transition: all 0s 1000s;
  position: relative;
}
.sidebar:active > p {
  background: blue;
  transform: translate(60px, -40px);
  width: 40em;
  transition: all 0s;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class='wrapper'>
    <div class='sidebar'> Sidebar
      <p>This is paragraph 1 inside sidebar </p>
      <p>This is paragraph 2 inside sidebar </p>
    </div>
    <div class='other'></div>
  </div>
</body>
</html>

＆＃13;

非常感谢您的投入。

FYI

这不是家庭作业项目。
我了解JavaScript。这个练习是为了学习CSS。
我知道其他可能的模仿点击的方法，如此处所述 Can I have an onclick effect in CSS? 或者更好的是https://tympanus.net/codrops/2012/12/17/css-click-events/

Answer 1

如果您不想要额外的元素，可以使用:focus结合tabindex属性来获取input元素的行为。因此，当您点击外面时，您会失去焦点，它就像＆＃34; unlick＆＃34;你想要的：

＆＃13;

.sidebar {
  outline:none;
}

.sidebar > p {
  background: blue;
  width: 15em;
  position: relative;
  transition:1s;
}
.sidebar:focus > p {
  background: blue;
  transform: translate(60px, -40px);
  width: 40em;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class='sidebar' tabindex="-1"> Sidebar
    <p>This is paragraph 1 inside sidebar </p>
    <p>This is paragraph 2 inside sidebar </p>
  </div>
  <div class='other'></div>
</body>
</html>

＆＃13;

Answer 2

解决：

使用transition-property-delay-value，active-pseudo-classes和descendant-selectors的组合。还必须包含transition-property:none;

＆＃13;

.wrapper .sidebar > p {
  background: blue;
  color: white;
  visibility: hidden;
  transition: visibility 0s 1000s;
}

/* Click */
.wrapper .sidebar:active > p {
  visibility: visible;
}

/* Unclick */ 
.wrapper:active .sidebar > p {
  transition-property: none;
}

＆＃13;

<html>
<head>
</head>
<body>
  <div class='wrapper'> Wrapper - unclick here
    <div class='sidebar'> Sidebar - click here
      <p>This is paragraph 1 inside sidebar. </p>
      <p>This is paragraph 2 inside sidebar. </p>
    </div>
  </div>
</body>
</html>

＆＃13;

模仿点击并取消点击CSS

2 个答案:

解决：