Question

我在html上创建了一个菜单（侧面和100％高度，可以像android全息图一样扩展）

<div id="menu">
<button class="menubutton"></button>
<button class="menubutton"></button>
</div>

菜单通常保持透明且宽度较短：

#menu {
background-color: transparent;
width: 8%;
}

这个想法是在悬停时扩展和着色。这很简单：

#menu:hover {
background-color: blue;
width: 90%;
}

直到这里没有问题。我需要对焦点产生同样的效果。在css中没有办法在子焦点上更改父css（顺便说一句，也不会悬停，但不需要，我可以使用整个菜单悬停）。所以我使用了一个脚本：

var menubuttonfocus = document.getElementsByClassName("menubutton");
  for (i=0; i<menubuttonfocus.length; i++) {
    menubuttonfocus[i].addEventListener("focus", function() {
      menu.style.backgroundColor = "blue";
      menu.style.width = "90%";
    });
    menubuttonfocus[i].addEventListener("blur", function() {
      menu.style.backgroundColor = "transparent";
      menu.style.width = "8%";
    });
  }

脚本工作得很好，问题是当你通过聚焦按钮触发这些事件时，＃menu的hss：hover会以某种方式改变，并且在悬停时#menu不会改变。我尝试通过做类似的事情来解决这个问题但是悬停而不是焦点：

menu.addEventListener("mouseenter", function(){
      menu.style.backgroundColor = "blue";
      menu.style.width = "90%";
  });
  menu.addEventListener("mouseout", function(){
      menu.style.backgroundColor = "transparent";
      menu.style.width = "8%";
  });

这种工作方式不同，但它确实是错误的。我还尝试选择“#menu：hover，＃menu：focus”，但它不起作用，因为焦点在于按钮元素而不是#menu。如果可行，请避免jquery，我知道它要求太多，但纯粹的css解决方案会很棒。可能有用的信息：html元素是用javascript创建的。我可以显示更多代码或屏幕截图，如果需要，您甚至可以下载它（它是一个Chrome应用程序）：chrome webstore page 感谢。

解答：我做了@GCyrillus告诉我的事情，通过javascript eventListener改变焦点上的#menu类。 .buttonbeingfocused包含与“#menu：hover”相同的css。这是脚本：

var menubuttonfocus = document.getElementsByClassName("menubutton");
  for (i=0; i<menubuttonfocus.length; i++) {
    menubuttonfocus[i].addEventListener("focus", function() {
      menu.classList.add("buttonbeingfocused");
    });
    menubuttonfocus[i].addEventListener("blur", function() {
      menu.classList.remove("buttonbeingfocused");
    });
  }

Answer 1

如果问题是我认为的那样 - 你忘了一件事：
当您对.menubutton进行聚焦/鼠标操作时 - 您正在鼠标移动#menu，反之亦然 - 因此您的菜单行为是不可预测的，因为您想要显示菜单并同时隐藏它。

解决方案通常在运行“隐藏”脚本部分之前设置一些超时，并在运行“显示”部分时清除此超时（如果存在）。

它将是这样的：

var menuTimeout;

    function showMenu() {
      if (menuTimeout) clearTimeout(menuTimeout);
      menu.style.backgroundColor = "blue";
      menu.style.width = "90%";
    }

    function hideMenu() {
      menuTimeout = setTimeout( function() {
        menu.style.backgroundColor = "transparent";
        menu.style.width = "8%";
      }, 800);
    }

//then add your listeners like you did - but put these functions as a handlers - like this:
menu.addEventListener("mouseenter", showMenu);
...
//in addition you need also "mouseenter" and "mouseleave" events handled on .menubuttons

在子焦点上更改父css（不破坏父级：悬停css规则）

1 个答案: