时间戳

首页 > 解决方案 > 如何使嵌套的 div 可点击？

html - 如何使嵌套的 div 可点击？

问题描述

我在侧边栏容器中列出了一些 div 按钮，它们工作正常，但是在我分配一个新的 div 作为背景并将按钮嵌套在它下面之后，所有按钮都失去了可点击的功能。我当前的代码附在下面。任何帮助表示赞赏。

#sidebarContainer{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  height: calc(99% - 20px);
  position: absolute;
  padding: 30px;
  top: 0%;
  right: 0%;
  z-index: -1;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: aqua;
  border-radius: 4px;
  max-width: 0px;
  height: 0px;
  padding: 20px;
  color: black;
  cursor: pointer;
  position: absolute;
  top: 2%;
}

.card2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: aqua;
  border-radius: 4px;
  max-width: 0px;
  height: 0px;
  position: absolute;
  padding: 15px;
  color: #444;
  cursor: pointer;
  top: 82%;
}

.card3 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: aqua;
  border-radius: 4px;
  max-width: 0px;
  height: 0px;
  position: absolute;
  padding: 15px;
  color: #444;
  cursor: pointer;
  top: 14%;
}
<div id="sidebarContainer">
    <div class="card" onclick="function()">
        <img src="https://img.icons8.com/windows/32/000000/enter--v2.png" />
    </div>
    <div class="card2">
        <img src="https://img.icons8.com/windows/32/000000/exit.png" />
    </div>

    <div class="card3">
        <img src="https://img.icons8.com/windows/32/000000/search--v2.png" />
    </div>
</div>

标签： htmlcss

解决方案

你有 onclick 功能我认为你错过了 javascript 代码，当你点击 div 时它工作正常

见代码示例

function myfunction()
{
alert("clicked");
}
#sidebarContainer{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  height: calc(99% - 20px);
  position: absolute;
  padding: 30px;
  top: 0%;
  right: 0%;
  z-index: -1;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: aqua;
  border-radius: 4px;
  max-width: 0px;
  height: 0px;
  padding: 20px;
  color: black;
  cursor: pointer;
  position: absolute;
  top: 2%;
}

.card2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: aqua;
  border-radius: 4px;
  max-width: 0px;
  height: 0px;
  position: absolute;
  padding: 15px;
  color: #444;
  cursor: pointer;
  top: 82%;
}

.card3 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: aqua;
  border-radius: 4px;
  max-width: 0px;
  height: 0px;
  position: absolute;
  padding: 15px;
  color: #444;
  cursor: pointer;
  top: 14%;
}
<div id="sidebarContainer">
    <div class="card" onclick="myfunction()">
        <img src="https://img.icons8.com/windows/32/000000/enter--v2.png" />
    </div>
    <div class="card2">
        <img src="https://img.icons8.com/windows/32/000000/exit.png" />
    </div>

    <div class="card3">
        <img src="https://img.icons8.com/windows/32/000000/search--v2.png" />
    </div>

</div>

推荐阅读