html - 当 child 获得焦点时将 CSS 应用于包含的 div

Question

我正在表演一些 :focus当用户浏览网站时发生变化，并试图添加 2px solid #F3692B; 的大纲给家长li , 当<a>当用户在站点中使用 tab 键时，标签会聚焦。

这是 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 用作容器，那么为什么不将焦点大纲应用于 anchor 标记而不是列表项并应用选项卡索引到 anchor ？

<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>