CSS 中不应用悬停效果。确切的问题是什么？

Question

我正在尝试为搜索栏构建搜索列表，当光标放置在列表中时，列表应该改变颜色，并在从显示的项目列表中单击时被选中。

searchlist.jsx

：

import React from 'react'
import { FaSearch } from 'react-icons/fa';
import './SearchList.css';

function SearchList({TitleArray,setSearchQuery}) {
  return (
   <>
    <div className="Container_SearchList">
    {
            TitleArray.map(m=>{
                return   <p
                key={m}
                onClick={e=>setSearchQuery(m)}
                className='titleItem'> 
               <FaSearch/>
            {m}
            </p>  
          })
      
        }   
    </div>
    </>
  )
}

export default SearchList;

searchlist.css

：

.Container_SearchList {
    background-color: white;
    width: 90.75%;
    position: absolute;
    top:2.7rem;
    height: fit-content;
    z-index: 91;
}

.titleItem {
    margin: 0;
    padding: 0.5rem;
    cursor: pointer;
}

.titleItem div p:hover {
    background-color: rgba(166,202,234,0.516);
}

在此输入图片描述

当光标放在名称上时，颜色应该改变并且名称应该被选中

Answer 1

如果您的 CSS 悬停效果未应用，可能有几个潜在问题需要解决：

检查 CSS 语法：确保悬停效果的 CSS 代码编写正确，具有正确的选择器、属性和值。 验证元素和选择器：确保您使用 CSS 选择器定位正确的 HTML 元素。 检查特异性：确保 CSS 选择器的特异性足以覆盖任何冲突的样式。 验证悬停状态：确保正确使用“:hover”伪类来定位元素的悬停状态。 检查冲突的样式：检查您的 CSS 代码和任何外部样式表，看看是否存在可能会覆盖悬停效果的冲突样式。 检查浏览器兼容性：在不同的网络浏览器中测试您的悬停效果，以确保其跨平台兼容。 验证 CSS 文件包含：仔细检查您的 CSS 文件是否已使用标记正确链接到 HTML 文档中。 检查浏览器开发人员工具：使用浏览器的开发人员工具检查元素并查看控制台中是否报告了任何错误或问题。