Question

我正在使用Javascript扩展径向成员。菜单上有图像按钮，可从中心图像展开，单击该按钮可展开菜单。我的问题是按钮图像无法单击，因为中央按钮的图像覆盖了它们。

            var i=0;
            function expand(){
              if(i==0){
            document.getElementById("menu").style.transform="scale(3)"; 
               document.getElementById("plus").style.transform="rotate(45deg)"; 
                i=1;
              }
              else{   document.getElementById("menu").style.transform="scale(0)"; 
               document.getElementById("plus").style.transform="rotate(0deg)"; 
                i=0;
              }
            }

body{
  background-color: #303358;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}

.toggle {
  background-color: #303358;
  text-align: center;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  position: absolute;
  margin: auto;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;

}

.fa-plus{
  height: 100%;
  width:auto;
  display: block;
  transition: 0.7s;
}

.menu {
  background-color: #000123;
  height: 100px;
  width: 100px;
  transform: scale(0);
  border-radius: 50%;
  border-style: double;
  border-color: #C8C8C8;
  position: absolute;
  margin: auto;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: -1;
  transition: 0.7s;

}

a {
  display: inline-block;
  position: absolute;
  font-size: 15px;
  color: #C8C8C8;

}

a:nth-child(1){
  top: 6px;
  left: 45px;
}

a:nth-child(2){
  top: 24px;
  left: 77px;
}

a:nth-child(3){
  top: 58px;
  left: 76px;
}

a:nth-child(4){
  top: 78px;
  left: 42px;
}

a:nth-child(5){
  top: 58px;
  left: 10px;
}

a:nth-child(6){
  top: 23px;
  left: 12px;
}

a:hover {
  color: #989898;
}

<div class="toggle" id="toggle" onclick="menu-expand()">

            <img src="CTicon.png" id="plus" class="fa fa-plus">
        </div>
        <div class="menu" id="menu">
            <a href="https://www.google.com/">
                <img src="bepis.png" style="height:20%;" class="fa fa-private">
            </a>
            <a href="https://www.google.com/">

                <img src="bepis.png" style="height:20%;" class="fa fa-public" >
            </a>
            <a href="https://www.google.com/">
                <img src="bepis.png" style="height:20%;" class="fa fa-public2"></i>
            </a>
            <a href="https://www.google.com/">
                <img src="bepis.png" style="height:20%;" class="fa fa-public3"></i>
            </a>
            <a href="https://www.google.com/">
                <img src="bepis.png" style="height:20%;" class="fa fa-public4"></i>
            </a>
            <a href="https://www.google.com/">
                <img src="bepis.png" style="height:20%;" class="fa fa-public5"></i>
            </a>
        </div>

我提出一个新问题的原因是，在大多数答案中，我发现人们建议仅添加一个指针事件：none;标记到我的中心扩展按钮上，但是我不能这样做，因为它也是一个按钮。为了解决这个问题，我尝试使用JS对其进行更改，以及尝试使用指针事件：none;。到目前为止，我发现的唯一解决方法就是更改切换的z-index，此问题是菜单展开时中心按钮然后我不可见，因为它位于菜单本身下方，我想避免。 / p>

编辑：好吧，现在我更加困惑了，因为freakin可以在这里的代码段中使用。

Answer 1

因此，一旦代码段在此处起作用，我就意识到它一定是菜单本身覆盖按钮的东西，因此我将切换按钮设置为z-index 2，将菜单设置为1，然后一切正常。

链接被阻止，无法在径向菜单上单击

1 个答案: