Question

我一直在搜索Stack Overflow和Google，但似乎找不到我想要的答案，因此将尽我所能在这里提出问题，并希望你们当中一个聪明的人能找到答案。

从HTML的角度来看，这就是我所拥有的

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

我想要做的是当我将鼠标悬停在Item1上时，只希望更改特定组件的背景颜色。只是父组件，而不是子组件。因此，在这种情况下，如果我突出显示Item1，则我不希望Item1-1突出显示。

但是，我的代码的问题是我似乎无法弄清楚，因为当我将鼠标悬停在Item1上时，它还会触发Item1-1上的悬停事件，这会导致问题:(我知道我的代码onMouseOver事件会触发当我也将鼠标悬停在Item1-1上时，它也会更改颜色。

这是到目前为止我为该组件准备的代码

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>
  )
}

对此有何建议？我会以一种可怕的方式来解决这个问题吗？有更好的东西吗？

Answer 1

答案可能很简单，只需将Item1放入其自己的元素中即可。

将您的结构更改为：

ArrayList<Patients>

并将您的悬停效果添加到该div

Answer 2

您可以尝试将pointer-events: none;放在Item-1-1元素上 https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

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

2 个答案: