面试题：CSS 伪类选择器:hover 和 :focus 的应用场景差异

Question

请详细阐述 :hover 和 :focus 伪类选择器在实际应用场景中的不同之处，并分别举例说明如何利用它们来实现前端页面的交互效果。

Answer 1

不同之处

1. 触发条件：
   • :hover：当鼠标指针悬停在元素上时触发，主要针对鼠标交互场景。
   • :focus：当元素获得焦点时触发，适用于可聚焦元素，如输入框、按钮等，触发方式除了鼠标点击，还可通过键盘的 Tab 键切换等方式。
2. 应用元素范围：
   • :hover：理论上可应用于任何元素，但通常用于可交互元素或者希望提供视觉反馈的元素，比如链接、按钮等。
   • :focus：主要应用于可聚焦的元素，像 <input>、<textarea>、<button> 以及设置了 tabindex 属性使其可聚焦的元素。
3. 用户体验目的：
   • :hover：提供一种即时的视觉反馈，让用户知道鼠标当前所处的元素，增强交互的直观性，帮助用户在页面上定位操作目标。
   • :focus：更多用于提示用户当前操作的焦点位置，特别是在表单填写或导航操作中，帮助用户明确当前可输入或操作的元素，提高可访问性。

实现前端页面交互效果示例

1. :hover 示例：
   • 场景：导航栏菜单，当鼠标悬停在菜单项上时改变颜色并显示子菜单。
   • HTML 代码：

<ul class="nav-menu">
    <li class="menu-item">
        首页
        <ul class="sub-menu">
            <li>子菜单 1</li>
            <li>子菜单 2</li>
        </ul>
    </li>
    <li class="menu-item">
        产品
        <ul class="sub-menu">
            <li>产品 1</li>
            <li>产品 2</li>
        </ul>
    </li>
</ul>

- **CSS 代码**：

.nav-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu-item {
    position: relative;
    display: inline-block;
    padding: 10px 15px;
    background-color: lightgray;
    color: black;
    cursor: pointer;
}
.menu-item:hover {
    background-color: gray;
    color: white;
}
.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: lightgray;
}
.menu-item:hover.sub-menu {
    display: block;
}

2. :focus 示例：
   • 场景：输入框在获得焦点时改变边框颜色，提示用户可以输入内容。
   • HTML 代码：

<input type="text" placeholder="请输入内容">

- **CSS 代码**：

input {
    padding: 5px;
    border: 1px solid gray;
}
input:focus {
    border-color: blue;
    outline: none;
}