Question

我正在尝试left_warrper隐身，在用户点击“点击我”按钮后，left_warrper更改为可见，但是:target元素由于某种原因不起作用

.left_wrapper {
  background: rgba(0,0,0,.7);
  cursor: default;
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  bottom: 0;
  visibility: hidden;
  -webkit-transition: opacity .5s, visibility 0s linear .5s;
  transition: opacity .5s, visibility 0s linear .5s;
}

:target .left_wrapper {
    opacity: 1;
    visibility: visible;
}

<a href="#sidebar" style="position:absolute;right:0px;z-index:1;">click me</a>
  <div id="sidebar" class="wrapper">
      <div class="slide">
      </div>
  </div>
<a href="#" class="left_wrapper"></a>

这很好用Young Kyun Jin，但是当我将代码添加到主.html页面时，我做了一些更改，比如添加了<nav>元素，现在它再次无效，我怎样才能检测到它？

以下是代码：

<nav id="menu">
<img src="Logo.png" style="position: fixed; width: 30%; top: 10px; left: 10px;">
    <a href="#sidebar"><img src="../img/menu.png" style="position: fixed; top: 22px; right: 10px;"></a>
      <div id="sidebar" class="wrapper">
          <div class="slide">
            <a class="close" href="#">&times;</a>
          </div>
      </div>
    </nav>
    <a href="#" class="left_wrapper"></a>

Answer 1

＆＃13;

.left_wrapper {
  background: rgba(0,0,0,.7);
  cursor: default;
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  bottom: 0;
  visibility: hidden;
  -webkit-transition: opacity .5s, visibility 0s linear .5s;
  transition: opacity .5s, visibility 0s linear .5s;
}

:target ~ .left_wrapper {
    opacity: 1;
    visibility: visible;
}

＆＃13;

<a href="#sidebar" style="position:absolute;right:0px;z-index:1;">click me</a>
  <div id="sidebar" class="wrapper">
      <div class="slide">
      </div>
  </div>
<a href="#" class="left_wrapper"></a>

＆＃13;

:target ~ .left_wrapper

~是兄弟选择器

目标元素没有响应

1 个答案: