Javascript 如何在不修改子项的情况下操作父项（css/react）

我一直在Stack overflow和Google上搜索，似乎找不到我想要的答案，所以我会尽我所能在这里提问，希望你们中的一个疯狂聪明的人能找到答案

在HTML的意义上，这里是我的

<ul>
  <li>
     item1
     <ul>
       <li>Item1-1</li>
     </ul>
  </li>
  <li>Item2</li>
<ul>

项目1

项目1-1


项目2

我想做的是，当我将鼠标悬停在Item1上时，我只想更改特定组件的背景色。只有父组件，而不是子组件。所以在这种情况下，如果我高亮显示Item1，我不希望Item1-1高亮显示

然而，我的代码的问题是，我似乎无法理解这一点，因为当我将鼠标悬停在Item1上时，它也会触发Item1-1上的悬停事件，这会导致问题：（我知道我的代码，当我将鼠标悬停在Item1-1上时，onMouseOver事件也会触发Item1，我不希望它也会在发生这种情况时更改颜色

这是我的代码，到目前为止，我已经为这个组件

import React, { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTachometerAlt, faWrench } from '@fortawesome/free-solid-svg-icons';
import { library } from '@fortawesome/fontawesome-svg-core';
import styled from 'styled-components';
import { 
  ADMIN_BAR_BACKGROUND_COLOR,
  ADMIN_BAR_COLOR,
  ADMIN_ITEM_HOVER,
  ADMIN_ITEM_HOVER_LINK,
  ADMIN_MENU_ITEMS
} from './../const-variables';
import { tsConstructorType } from '@babel/types';

library.add(faTachometerAlt, faWrench);

export const AdminMenuItem = props => {  
  const StyledAdminMenuItem = styled.li`   
    .test {
      background-color: orange;
    }
  `;

  const [isSelected, setIsSelected] = useState({one: false, two: false, three: false});
  function onHover() {        
    setIsSelected(!isSelected);   
  }

  return (
    <StyledAdminMenuItem 
      onMouseEnter={onHover}
      onMouseLeave={onHover}      
    >
      <div className={isSelected ? "" : "test" }>{props.title}</div>

      {props.children}
    </StyledAdminMenuItem>
  )
}

export const AdminMenuList = props => {  
  const StyledAdminMenuList = styled.ul`
    list-style-type:none;
    padding: 0px 0px;
    list-style-type: none;

`;

  return (
    <StyledAdminMenuList>
      {props.children}
    </StyledAdminMenuList>
  )
}

export const AdminMenu = props => {
  const StyledAdminMenu = styled.div`
  background-color: ${ADMIN_BAR_BACKGROUND_COLOR};
  color: ${ADMIN_BAR_COLOR};  
  width: 160px;
  float: left;
  height: 100%
`;

  return (
    <StyledAdminMenu>
      <AdminMenuList>
        <AdminMenuItem         
          title={"Item1"}
        >
          <AdminMenuList>
            <AdminMenuItem 
          title={"Item1-1"}          
          sub={true}
        />   
          </AdminMenuList>
          </AdminMenuItem>
         <AdminMenuItem 
          title={"Item2"}          
        />
      </AdminMenuList>
    </StyledAdminMenu>
  )
}

import React，{useState}来自“React”；
从'@fortawesome/react fontawesome'导入{FontAwesomeIcon}；
从“@fortacheme/free solid svg icons”导入{fatachemeteral，fa扳手}”；
从“@fortawesome/fontawesome svg核心”导入{library}；
从“样式化组件”导入样式化；
导入{
管理条背景色，
管理栏颜色，
管理员项目悬停，
管理员项目悬停链接，
管理菜单项
}来自“/../const variables”；
从'@babel/types'导入{tsConstructorType}；
库添加（Fatachmeteral、Fa扳手）；
导出常量AdminMenuItem=props=>{
const StyledAdminMenuItem=styled.li`
.测试{
背景颜色：橙色；
}
`;
const[isSelected，setIsSelected]=useState（{1:false，2:false，3:false}）；
函数onHover（）{
setIsSelected（！isSelected）；
}
返回(
{props.title}
{props.children}
)
}
导出常量AdminMenuList=props=>{
const StyledAdminMenuList=styled.ul`
列表样式类型：无；
填充：0px 0px；
列表样式类型：无；
`;
返回(
{props.children}
)
}
导出常量AdminMenu=props=>{
const StyledAdminMenu=styled.div`
背景色：${ADMIN\u BAR\u background\u color}；
颜色：${ADMIN\u BAR\u color}；
宽度：160px；
浮动：左；
身高：100%
`;
返回(
)
}

---

对此有什么建议吗？我是不是做得很糟糕？有什么更好的吗？

答案可能很简单，就像让Item1放在它自己的元素中一样

将您的结构更改为：

<ul>
  <li>
     <div class="item1-background">item1</div>
     <ul>
       <li>Item1-1</li>
     </ul>
  </li>
  <li>Item2</li>
<ul>

项目1

项目1-1


项目2

---

并将悬停效果添加到该div中

您可以尝试在Item-1-1元素上放置一个

指针events:none；