问题描述
这是适用于移动浏览器的功能,除了 iOS Safari。我在列表项中只有两个并行的 span
元素(每个元素一个类)。当 display
或 :hover
伪类在 :focus
元素上触发时,每个类的 <li>
属性的值设置为切换。这使得我可以在用户悬停或点击项目时更改每个列表项目的内容。除了适用于 iOS 的 Safari 之外,它运行良好。
这是我正在做的一个例子:https://devrobgilb.com/Test/(我做了同样的事情 this CodePen 也是如此,但是 CodePen 的工作原理使它可以在 Safari for iOS 上正常工作)。任何有关让 Safari iOS 使用相同功能的最佳方法的任何帮助将不胜感激。
(最后 6 个 css-selectors 是让它打勾的原因)
下面是我的代码:
/* I'm a CSS file weeeee */
body {
background: lightblue;
}
section {
margin: 20% 30%;
font-size: 48px;
}
li {
padding: 30px;
}
span {
padding: 10px;
}
.default {
background: lightpink;
display: inline-block;
}
.appear {
background: lightgreen;
display: none;
}
li:hover > .default {
display: none;
}
li:hover > .appear {
display: inline-block;
}
li:focus > .default {
display: none;
}
li:focus > .appear {
display: inline-block;
}
<body>
<section>
<ul>
<li>
<span class="default">Hover or tap.</span><span class="appear">You did it,hooray.</span>
</li>
<li>
<span class="default">Hover or tap.</span><span class="appear">You did it,hooray.</span>
</li>
</ul>
</section>
</body>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)