为什么在flex或grid中悬停不起作用？ [关闭]

Posted 2021-05-03

关闭。这个问题是off-topic。它当前不接受答案。

---

是否要改善此问题？ Update the question，因此堆栈溢出为on-topic。

关闭3个月前。

我正在尝试在水平菜单栏中使用flex和grid，并且悬停无法正常工作。它在没有网格或弹性的情况下工作正常。我正在尝试是否可以与grid或flex一起使用。

html：

<div class="hmenu">
 <ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
 </ul>

CSS：

.hmenu{ display: grid; grid-auto-columns: auto; background-color: #015491; margin-top: 5px; }
.hmenu > ul { display: flex; justify-content: center; align-items: center; }
.hmenu > ul > li { display: flex; width: auto; height: 100%; background: linear-gradient(-45deg, #788cff, #b4c8ff); border: #A67BC6 solid; padding: 10px; align-items: center; justify-content: center; margin-right: 50px; }
.hmenu > a { font-size: 15px; line-height: 100%; text-transform: uppercase; text-decoration: none; font-family: sans-serif "Avenir Light"; font-weight: strong 300; color: #FFFFFF; }
.hmenu a:hover { box-shadow: 0px 16px 22px 2px rgba(51,51,51,0.2); transform: translateY(-20px); background-color: #73b3e7; }

答案

a：hover仅适用于A HREF元素，并且在您的代码中没有它们。

放置一个HREF元素：

<div class="hmenu">
 <ul>
  <li><a href="...">A</a></li>
  <li><a href="...">B</a></li>
  <li><a href="...">C</a></li>
 </ul>
</div>

或使用.hmenu：hover代替.hmenu a：hover。

.hmenu{ display: grid; grid-auto-columns: auto; background-color: #015491; margin-top: 5px; }
.hmenu > ul { display: flex; justify-content: center; align-items: center; }
.hmenu > ul > li { display: flex; width: auto; height: 100%; background: linear-gradient(-45deg, #788cff, #b4c8ff); border: #A67BC6 solid; padding: 10px; align-items: center; justify-content: center; margin-right: 50px; }
.hmenu > a { font-size: 15px; line-height: 100%; text-transform: uppercase; text-decoration: none; font-family: sans-serif "Avenir Light"; font-weight: strong 300; color: #FFFFFF; }
.hmenu :hover { box-shadow: 0px 16px 22px 2px rgba(51,51,51,0.2); transform: translateY(-20px); background-color: #73b3e7; }

此外，您应该使用.hmenu a而不是.hmenu> a，或者也许使用.hmenu> ul> li> a ...，但是按原样，它将不起作用。

另一答案

<li><a href="...">A</a></li>
  <li><a href="...">B</a></li>
  <li><a href="...">C</a></li>
 </ul>

现在可以使用！

另一答案

<div class="hmenu"> <ul> <li>A</li> <li>B</li> <li>C</li> </ul> </div> .hmenu{ display: grid; grid-auto-columns: auto; background-color: #015491; margin-top: 5px; } .hmenu > ul { display: flex; justify-content: center; align-items: center; } .hmenu > ul > li { display: flex; width: auto; height: 100%; background: linear-gradient(-45deg, #788cff, #b4c8ff); border: #A67BC6 solid; padding: 10px; align-items: center; justify-content: center; margin-right: 50px; } .hmenu > a { font-size: 15px; line-height: 100%; text-transform: uppercase; text-decoration: none; font-family: sans-serif "Avenir Light"; font-weight: strong 300; color: #FFFFFF; } .hmenu ul li:hover { box-shadow: 0px 16px 22px 2px rgba(51,51,51,0.2); transform: translateY(-20px); background-color: #73b3e7; }

现在可以使用！