Question

我有一个带有导航元素的页面，我想隐藏在页面的左/右边，并在我悬停图标时显示。我在我想隐藏的元素上使用:after伪元素创建了图标。该解决方案在经过测试的桌面浏览器上运行良好但在chrome mobile上失败（即使桌面版本工作正常）。

我在iOS和Android上都进行了测试，没有人能够显示:after伪元素。但是如果您碰巧点击:after应该在的位置，菜单会显示。所以它似乎只是一个显示问题。

我已创建this jsfiddle来显示问题。我添加了一些javascript只是因为它在真实页面上，但我不认为这是问题的原因。

甚至更奇怪的是，在iOS上，chrome和safari都可以在jsfiddle上显示M和S，但无法在真实页面上显示图标。但Android上的Chrome也无法在jsfiddle上显示元素。

所以，我的问题是，如何在Chrome移动版或iOS浏览器上显示:after个伪元素？

＆＃13;

body, html {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  background: white;
}

h1 {
  text-align: center;
}

footer {
  padding: 10px;
}

section {
  background: white;
  margin: 350px 0px 0px;
  padding: 10px 10% 25px;
  box-shadow: 0px 10px 20px rgba(120, 120, 120, 0.19), 0px -10px 10px rgba(150, 150, 150, 0.23);
  overflow: hidden;
  text-align: justify;
}

header div {
  position: fixed;
  text-align: center;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: -1;
}

header nav {
  display: block;
  position: fixed;
  width: 60%;
  top: 0px;
  bottom: 0px;
  right: 100%;
  background: #BBBBBB;
  color: #324353;
  transition: all 0.8s ease-in-out;
  z-index: 3;
  overflow-y: auto;
}

header nav:hover {
  right: 40%;
  box-shadow: 15px 0px 20px rgba(100, 100, 100, 0.3);
}

header nav:after {
  display: block;
  position: fixed;
  padding: 15px;
  content: "M";
  top: 0px;
  left: 0px;
  color: #324353;
  transition: all 0.8s ease-in-out;
  z-index: 4 !important;
}

header nav:hover:after {
  visibility: hidden;
  content: "x";
}

header aside {
  display: block;
  position: fixed;
  width: 60%;
  top: 0px;
  bottom: 0px;
  left: 100%;
  background: #BBBBBB;
  color: #324353;
  transition: all 0.8s ease-in-out;
  z-index: 3;
  overflow-y: auto;
}

header aside:hover {
  left: 40%;
  box-shadow: -15px 0px 20px rgba(100, 100, 100, 0.3);
}

header aside:after {
  display: block;
  position: fixed;
  padding: 15px;
  content: "S";
  top: 0px;
  right: 0px;
  color: #324353;
  transition: all 0.8s ease-in-out;
  z-index: 4 !important;
}

header aside:hover:after {
  visibility: hidden;
  content: "x";
}

＆＃13;

<header>
  <div>
    <h1>
    Some Title
    </h1>
  </div>
  <nav>
    Some Menu
  </nav>
  <aside>
    Some Settings
  </aside>
</header>

<section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id faucibus sem. Nullam venenatis arcu massa, sit amet sodales dui dapibus sit amet. Nunc est elit, feugiat a molestie a, eleifend vitae diam. Sed eleifend eros vel nunc cursus gravida. Nulla magna dolor, finibus non dolor a, auctor porta diam. Proin a justo ultrices, semper dolor sit amet, maximus leo. Proin vehicula tincidunt tortor, gravida pellentesque risus sollicitudin vel. Cras lacinia luctus tellus in consectetur. Morbi facilisis nec justo ut condimentum. In semper vestibulum libero, non vestibulum lacus efficitur sed. Proin laoreet convallis tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec porta ligula odio, quis hendrerit nisl accumsan ac. Mauris aliquam cursus ultricies. Curabitur luctus, mi auctor bibendum interdum, mi arcu luctus lorem, at ornare nunc felis et lorem. Maecenas ut hendrerit arcu.
</section>
<footer>Some footer text</footer>

＆＃13;

Answer 1

不确定移动浏览器会发生什么，但从overflow-y: auto;和header nav移除header aside似乎无效。

但是，如果您确实需要滚动条，则可以在<ul>中添加其他元素（即<nav>）。

header nav ul {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  padding: 0;
  margin: 0;
  overflow-y: auto;
}

请参阅 updated jsFiddle 。

伪元素：在chrome mobile

1 个答案: