Question

我想从列表中选择项目。

a[class="zwart"]:focus~ul li:not([class="zwart"]) {
  height: 0;
  width: 0;
  border: none;
  margin: 0;
  display: none;
}

a[class="grijs"]:focus~ul li:not([class="grijs"]) {
  height: 0;
  width: 0;
  border: none;
  margin: 0;
  display: none;
}

<a href="#" class="all" title="Alles">Alles</a>
<a href="#" class="blauw" title="Blauw">Blauw</a>
<a href="#" class="bruin" title="Bruin">Bruin</a>
<a href="#" class="goud" title="Goud">Goud</a>
<a href="#" class="grijs" title="Grijs">Grijs</a>
<a href="#" class="oranje" title="Oranje">Oranje</a>
<a href="#" class="rood" title="Rood">Rood</a>
<a href="#" class="roze" title="Roze">Roze</a>
<a href="#" class="zwart" title="Zwart">Zwart</a>


<ul>
  <li class="zwart">
    <a href="test.html">
      <img src="https://via.placeholder.com/150">
    </a>
  </li>
  <li class="grijs">
    <a href="test2.html">
      <img src="https://via.placeholder.com/200">
    </a>
  </li>
</ul>

当首先选择然后单击页面上的任意位置时，所有图像都将重新显示，并且当我单击图像时也是如此。当我对一种颜色进行过滤时，我仍然想点击链接。对于项目，我们只能使用HTML和CSS。使用我的过滤器后，单击图像时是否可以使用链接而不显示所有内容？

选择仅具有CSS链接的项目

0 个答案: