在Safari中无法在css中启用焦点选择器 [英] Can't enable focus selector with anchors in css in Safari

问题描述

我知道某些元素不能接受 focus 选择器，比如列表元素，但我认为锚点很好。使用下面的代码（我创建了一个纯CSS响应下拉菜单），当单击锚时，我不能使隐藏的 ul 出现。

HTML：

 < ul> 
< li class =primarylist> 
< a href =＃class ='category1anchor'>文字< / a> 
< ul class =menudrop> 
< li class =secondarylist> One< / li> 
< li class =secondarylist> Two< / li> 
< li class =secondarylist>三< / li> 
< / ul> 
< / li> 
< / ul> 
  

CSS：

  ul.menudrop {
 display：none; 
背景颜色：白色; 
} 
 li.primarylist a：focus + ul.menudrop {
 display：block; 
} 
  

jsFiddle： https://jsfiddle.net/kx0kex7x/

更改从焦点到 hover 的 jsFiddle 选择器，它完美地工作，让我没有任何有理由怀疑我的语法是正确的。使用活动仅在mousedown的持续时间内显示 ul 。任何指针？ （我在Safari 10上，似乎可以在最新版本的Chrome和FF上运行）。

---

更新

我尝试了使用 target 选择器，并取得了部分成功。如果我更改我的 a.categor1anchor 链接以匹配每个 ul.menudrop 的新创建的唯一ID，则可以使点击锚点时出现 ul.menudrop 。不过，这是一个响应式设计，我似乎无法删除其他页面大小的目标选择器。例如，在较大的页面大小下，我使用 hover 选择器，但是最后一个定位的 ul.menudrop 来自屏幕尺寸越小，屏幕尺寸越小。我看不出任何方法来清除响应式设计的目标选择器。 继承和初始显示不会影响它。

解决方案

经过对过去几天的研究，并在多个途径上进行研究，才发现需要稍微复杂的破解才能解决所有情况，我会找到菜单，我认为它会变得更多优雅和干净的只是使用 jQuery 旁边我的代码来处理各种下拉菜单出现等我试图避免它，但我不认为 CSS 对于这种类型的菜单在编写时仍然相当强大。

I'm aware that certain elements can't accept a focus selector, such as list elements, but I thought that anchors were fine. Using the following code (I'm creating a pure css responsive drop-down menu), I can't make the hidden ul appear when clicking the anchor.

HTML:

<ul>
  <li class="primarylist">
    <a href="#" class='category1anchor'>Text</a>
    <ul class="menudrop">
      <li class="secondarylist">One</li>
      <li class="secondarylist">Two</li>
      <li class="secondarylist">Three</li>
    </ul>
  </li>
</ul>

CSS:

ul.menudrop {
  display: none;
  background-color: white;
}
li.primarylist a:focus + ul.menudrop {
  display: block;
}

jsFiddle: https://jsfiddle.net/kx0kex7x/

Change the jsFiddle selector from focus to hover, and it works perfectly, leaving me without any reason to doubt my syntax is correct. Using active only displays the ul for the duration of the mousedown. Any pointers? (I'm on Safari 10. Seems to work in the latest Chrome and FF fine).

---

Update

I've tried using the target selector with partial success. If I change my a.categor1anchor links to match newly created unique ids for each ul.menudrop, I can make the ul.menudrop appear on clicking the anchor. However, this is a responsive design and I can't seem to remove the target selector at other page sizes. For example, at a larger page size, I use the hover selector instead, but the last targeted ul.menudrop from a smaller screensize remains open at larger screen sizes. I can't see any way to clear target selectors for responsive designs. Inherit and Initial displays don't affect it.

解决方案

After researching for the past few days and progressing down multiple avenues only to find a slightly convoluted hack is needed to solve every situation I'll find the menu in, I think it's turning out more elegant and clean to just use jQuery alongside my code to handle various dropdowns appearing, etc. I was trying to avoid it but I don't think CSS is still quite robust enough for menus of this type at the time of writing.

这篇关于在Safari中无法在css中启用焦点选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！