为什么我的锚点不在下拉列表中导航？

Question

在 CSS #lang-dropdown-button:focus应该设置pointer-events: all in #router-list ，但它似乎不起作用。 锚点不会导航到下拉菜单中的德语。 为什么呢？

 *{ margin: 0px; padding: 0px; border:none; } body { background-image: url(assets/bg.png); background-repeat: no-repeat; background-attachment: fixed; } #header { width: 94%; height: 50px; border-radius: 34px; margin: 35px 3% 0px; background-color: rgb(255, 255, 255); display: flex; justify-content: space-between; background-size: cover; filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.1)); position: relative; z-index: 100; } #body { width: 94%; height: 1000px; margin: 35px 3% 35px; border-radius: 25px; background-color: rgb(255, 255, 255); filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.1)); } #logo { align-self: center; height: 70px; width: 70px; border-radius: 14px; background-size: cover; cursor: pointer; } #cont1 { display: flex; align-self: center; } #cont2 { align-self: center; } #lang-dropdown { height: fit-content; width: fit-content; flex-direction: column; display: flex; margin-right: 20px; border-radius: 15px; } #elipse { height: 10px; width: 10px; border-radius: 100%; align-self: center; background-color: #333333; } #title { align-self: center; margin-left: 10px; display: flex; flex-direction: row; } #privacy { margin-left: 14px; font-family: Ubuntu-Md; font-style: normal; line-height: 1; font-size: 18px; position: absolute; align-self: center; color: #333333; } #lang { font-family: Ubuntu-Md; font-style: normal; font-weight: normal; font-size: 16px; line-height: 21px; align-self: center; color: #333333; } #text-container { padding: 0px; } #policy-date { font-family: Ubuntu; font-style: normal; font-weight: normal; font-size: 16px; line-height: 21px; align-self: center; color: #838383; margin-top: 10px; padding-left: 3.5%; padding-bottom: 10px; } #text1 { font-family: Ubuntu-Md; font-style: normal; font-weight: bold; font-size: 28px; align-self: center; color: #333333; padding: 3% 3% 0px; } #body-header { width: 100%; /* border-bottom: #d6d6d6 solid 1px; */ } #globe { color: #333333; margin-left: 3px; width: 25px; height: 25px; } #arrow { color: #333333; margin-left: 1px; margin-top: 1px; align-self: center; } #lang-dropdown-button { height: fit-content; width: fit-content; justify-content: space-around; flex-direction: row; display: flex; background-color: rgba(255, 255, 255, 0); cursor: pointer; border-radius: 15px; transition: all 0.6s ease; width: 110px; } #router-list ul { position: absolute; background-color: #E7E7E7; display: flex; justify-content: space-around; flex-direction: column; align-items: center; height: 35px; width: 110px; border-radius: 0px 0px 15px 15px; } #router-list li { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transition: all 0.4s ease; } #last { border-radius: 0px 0px 15px 15px; } #router-list { position: relative; z-index: 50; opacity: 0; transform: translateY(-10px); transition: all 0.4s ease; pointer-events: none; } #last #lang-btn { padding-bottom: 8px; } #router-list li:hover { background-color: #d4d1d1; border-radius: 0px; } #router-list #last:hover { background-color: #d4d1d1; border-radius: inherit; } /* #lang-dropdown-button:focus + #lang-dropdown{ border-radius: 15px 15px 0px 0px; } */ #lang-dropdown-button:focus { outline: none; background-color: #E7E7E7; border-radius: 15px 15px 0px 0px; } #lang-dropdown-button:focus + #router-list { opacity: 1; pointer-events: all; z-index: 200; transform: translateY(0px); } #lang-dropdown-button:hover{ background-color: #d4d1d1; } #lang-btn { background-color: rgba(255, 255, 255, 0); width: 100%; height: 100%; font-family: Ubuntu-Md; font-style: normal; font-weight: normal; font-size: 16px; line-height: 21px; text-decoration: none; color: #333333; display: flex; justify-content: center; align-items: center; } #lang-btn:hover { cursor: pointer; } @font-face { font-family: "Ubuntu-md"; src: url("assets/Ubuntu-Medium.ttf"); } @font-face { font-family: "Ubuntu"; src: url("assets/Ubuntu-Regular.ttf"); } @media only screen and (max-width: 370px){ #privacy { margin-right: 127px; font-size: 16px; } #text1 { font-size: 24px; } } @media only screen and (max-width: 620px){ #text1 { padding: 5% 5% 0px; } #policy-date { padding: 0% 6% 10px; } } @media only screen and (max-width: 325px){ #text1 { padding: 6% 6% 0px; } #policy-date { padding: 0% 7% 10px; } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link href="style_v2.css" rel="stylesheet"/> <title>Document</title> </head> <body> <div id="header"> <div id="cont1"> <img id="logo" src="assets/logo.png" > <div id ="title"><div id="elipse"></div> <div id="privacy">Privacy Policy</div> </div> </div> <div id="cont2"> <div id="lang-dropdown"> <button id="lang-dropdown-button" data-toggle="dropdown" > <img id="arrow" src="assets/keyboard_arrow_down-24px 1.svg"/> <div id="lang">English</div> <img id="globe" src="assets/globe-24px.svg"/> </button> <div id="router-list" > <ul> <li id="last"><a href="de:html" id="lang-btn">Deutsch</a></li> </ul> </div> </div> </div> </div> <div id="box"></div> <div id="body"> <div id="text-container"> <div id="body-header"> <div id="text1">title</div> <div id="policy-date">Effective Date, md, y</div> </div> <div></div> </div> </div> </body> </html>

Answer 1

我相信这与 css 组合子 https 的层次结构有关：//www.w3schools.com/css/css_combinators.asp

我也无法让它工作..可能是因为组合器正在作用于 div ......但链接实际上是 li 在 ul 中。 这只是一个猜测寿。

但是，我确实为您找到了解决方法。 切换到可见性：隐藏而不是指针事件。 我在 VS 代码中对其进行了测试

它解决了你的隐藏链接是可点击的东西

        #router-list {
  position: relative;
  top: 20px;
  z-index: 50;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.4s ease;
  visibility: hidden;
  /* pointer-events: none; */
}

#lang-dropdown-button:focus + #router-list {
  opacity: 1;
  /* pointer-events: all; */
  visibility: visible;
  z-index: 200;
  transform: translateY(0px);
}

Answer 2

只需更改指针事件：无； 指向指针事件：全部；