html - 悬停不能按预期工作

Question

问题是，当我悬停在 li 上时，悬停不起作用，第一个有效，但悬停区域与 div 的大小不同。

这是一个没有 javascript 的通过复选框工作的侧边栏。

这是HTML

 <input type="checkbox" id="sidebartoggler">

<div id="page-wrap">
  <label for="sidebartoggler" id="toggle">☰</label>
<div id="sidebar">
    <ul class="elements">
      <li>Str. Glowna</li>
      <li>Wyb. przedmiotu</li>
    </ul>
</div>

<div class="page-content">

和CSS

.page-content
{
  position: relative;
  z-index: 0;
  transition: padding-left 0.5s;
}
#chose
{
  font-size: 40px;
  text-align: center;
  margin: 5% 0 5% 0;
}
#sidebar
{
  position: fixed;
  left:-190px;
  right: 0;
  top: 0px;
  bottom:0px;
  width: 170px;
  padding: 10px;
  background: #333;
  transition: left 0.5s;
  display: inline-block;

}
#toggle
{
  position: fixed;
  left:20px;
  top: 15px;
  font-size: 30px;
  transition: left 0.5s;
}
#sidebartoggler
{
  display: none;

}
#sidebartoggler:checked + #page-wrap #sidebar
{
  left:0px;

}
#sidebartoggler:checked + #page-wrap #toggle
{
  left:200px;

}
#sidebartoggler:checked + #page-wrap .page-content
{
  padding-left: 180px;

}
.page-content
{
  padding-left: 0px;
}
#sidebar ul
{
  font-size: 15px;
  list-style: none;
  list-style-position: inside;
  width: 170px;
  margin: 20px 0 0 -40px;
  text-align: center;

}
#sidebar ul > li
{
  padding: 10px 0;
  margin: 5px 0 0 0;
  background-color: #444;
  display: block;
}
#sidebar ul > li:hover
{

  background-color: #555
}

在这里你可以看到完整的代码:https://jsfiddle.net/2hnLyjw4/1/ 对不起我的英语不好。 感谢您的帮助!

Answer 1

问题是您在 .page-content 上使用了 padding-left；这会导致内容根据需要向右移动，但 div 部分位于菜单顶部并干扰悬停事件。

将其更改为使用 margin-left:

.page-content {
  position: relative;
  z-index: 0;
  transition: margin-left 0.5s;
}

...

#sidebartoggler:checked + #page-wrap .page-content {
  margin-left: 180px;
}

.page-content {
  margin-left: 0px;
}