OGeek|极客世界-中国程序员成长平台

标题: android - 伪元素 :after disapears on chrome mobile [打印本页]
作者: 菜鸟教程小白    时间: 2022-12-12 18:22
标题: android - 伪元素 :after disapears on chrome mobile

我有一个带有导航元素的页面，我希望将其隐藏在页面的左侧/右侧，并在我悬停图标时显示。我在要隐藏的元素上使用 :after 伪元素创建了图标。该解决方案在经过测试的桌面浏览器上运行良好，但在 chrome 移动设备上失败(即使桌面版本运行良好)。

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

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

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

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

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";
}
<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>

Best Answer-推荐答案


不确定移动浏览器发生了什么，但似乎从 header nav 和 header side 中删除 overflow-y: auto;工作。

但是，如果您确实需要滚动条，您可以在