Question

当用户在网站中进行标记时，我正在执行一些:focus更改，并尝试在2px solid #F3692B;时向li添加<a>大纲当用户通过站点进行选项卡时，标记会被聚焦。

这是HTML：

<li class="panel activePage" style="width: 1038px; height: 340px;">
    <a href="/about" class="" style="width: 100%; height: 100%;">
        <img src="/sites/distribution.jpg" alt="Digital" class="active">
    </a>
</li>

我知道有一些CSS来改变包含div和相邻div的属性，但是我还没有找到任何方法来改变父div的CSS。

请记住，我不想为此使用jQuery！

有什么建议吗？

Answer 1

jQuery是理想的...但是......如果您只是将li用作容器，那么为什么不将焦点轮廓应用于锚标记而不是列表项并应用选项卡索引对锚点？

<style>
li.panel { width:1038px; height:340px; }
li.panel a { width:100%; height:100%; }
.active { outline:#00FF00 dotted thick; }
</style>

<ul>    
<li class="panel">
    <a href=""><img src="" alt="" class="active" tabindex="1"></a>
</li>
<li class="panel">
    <a href=""><img src="" alt="" tabindex="2"></a>
</li>
<li class="panel">
    <a href=""><img src="" alt="" tabindex="3"></a>
</li>
</ul>

Answer 2

最近有几个浏览器开始支持:focus-within伪类。

但并非所有浏览器都完全支持它。

当孩子聚焦时，将CSS应用于包含div

2 个答案: