html - 使用 HTML 和 CSS 在元素具有焦点时设置部分事件

Question

我在我的网站上实现了一个包含多个部分的复杂表单。对于每个逻辑部分，我将我的表单分成不同的部分元素，并使用 CSS 为该部分设置样式。这只是用户指示表单的下一部分的视觉辅助工具。一个简单的例子就是这个部分周围的绿色边框 HERE .

每个部分可以有文本框、下拉列表、单选按钮等的任意组合。一个简单的例子如下。

<section class="form-section">
    <p class="form-header">
        Month
    </p>

    <select id="month" name="month">
        <option value="usa">Jan</option>
        <option value="usa">Feb</option>
        <option value="usa">March</option>
        <option value="usa">April</option>
        <option value="usa">May</option>
    </select>
</section>

还有我的“表单部分”CSS，如下所示。

.form-section {
    background-color: #f2f2f2;
    border: 1px solid rgba(156,156,156,0.1);
    width:100%;
    padding: 10px;
    height: auto;
    align-content:center;  
}

但是，我想在用户仅与该部分内容交互时将样式应用于“表单部分”——例如当用户选择下拉列表项时，我想向该部分添加阴影。我可以使用 CSS :active 实现这一点，如下所示，但样式仅在用户单击部分元素或单击下拉列表时应用。当用户不按下元素时，不会保留样式。

.form-section:active {
    border: 1px solid #000000;
    -webkit-box-shadow: 4px 5px 14px 0px rgba(156,156,156,0.5);
    -moz-box-shadow: 4px 5px 14px 0px rgba(156,156,156,0.5);
    box-shadow: 4px 5px 14px 0px rgba(156,156,156,0.5);
}

我如何实现这个或者我是否需要 Javascript 来处理这个？

编辑:我也在该部分尝试了 :target 但这也不起作用。

Answer 1

在纯 HTML/CSS 中，父元素可以更改子元素的样式，但子元素不能更改其父元素的样式:

#parent:hover #children { background-color: pink; } /*OK*/
#children:hover #parent { background-color: cyan; } /*Non Ok*/

我认为您需要一点 javascript。这是一种可能的方法:

$("#child").hover(function(){
   $(this).parent().css("bakground","red");
});

希望对您有所帮助。