CSS hover效果未生效：搜索列表项悬停变色与点击选中问题求助

一、修复hover效果失效问题 #

你的CSS选择器匹配错误：JSX中每个列表项是<p className="titleItem">，内部没有嵌套div > p结构，导致.titleItem div p:hover无法匹配到目标元素。只需修改hover选择器即可：

二、实现点击选中效果 #

通过React状态记录当前选中的项，给选中项添加专属样式，区分普通状态。

修改后的完整代码 #

searchlist.jsx

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

function SearchList({TitleArray,setSearchQuery}) {
  // 新增状态记录选中的列表项
  const [selectedItem, setSelectedItem] = useState('');

  const handleItemClick = (item) => {
    setSearchQuery(item);
    setSelectedItem(item);
  }

  return (
    <div className="Container_SearchList">
    { TitleArray.map(m => {
      return (
        <p
          key={m}
          onClick={() => handleItemClick(m)}
          className={`titleItem ${selectedItem === m ? 'selected' : ''}`}
        > 
          <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;
  transition: background-color 0.2s ease; /* 可选：添加平滑过渡动画 */
}

/* 修复hover选择器，直接匹配列表项 */
.titleItem:hover {
  background-color: rgba(166,202,234,0.516);
}

/* 选中项专属样式 */
.titleItem.selected {
  background-color: rgba(166,202,234,0.7); /* 用更深的颜色区分选中状态 */
}

说明 #

1. hover效果：修改选择器为.titleItem:hover后，鼠标悬停列表项时会正确触发背景色变化
2. 选中效果：通过selectedItem状态记录点击的项，渲染时给对应项添加selected类，CSS中定义该类的样式，实现点击后高亮的效果

内容的提问来源于stack exchange，提问作者Y22IT055 RAMYA