CSS hover高亮无法覆盖父组件问题求助

我正在开发一个语言选项组件，语言代码垂直排列在父组件内，效果如下：

当鼠标悬停在语言选项上时，仅字母代码所在的独立styled组件会高亮，无法实现高亮效果覆盖父组件的整个宽度。

原样式代码 #

import styled, { css } from 'styled-components';

export const LanguagesWrapper = styled.div`
  background-color: #b0b2b7;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Add flex-grow property to expand vertically */
  padding: 0.3rem;
  gap: 0.8rem;
  
`;

export const StyledLanguagesTitle = styled.p`
  font-size: ${({theme}) => theme.typography.fontSize.medium};
  cursor: pointer;
  transition: background-color 0.3s;
  &:hover {
    background-color: #526d82;
  }
`;

export const ButtonForReferenceLink = styled.button<{
  icon: string;
}>`
  position: relative;
  width: 1.3rem;
  height: 1.3rem;
  background-image: url(${({icon}) => icon});
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: transparent;
  border: none;
  cursor: pointer;
  :first-of-type {
    height: 1.1rem;
  }
`;

原组件代码 #

import {useState} from 'react';
import {
  ButtonForReferenceLink,
  LanguagesWrapper,
  StyledLanguagesTitle,
} from './styles';
import {LanguageOptionsProps, ReferenceLinkProps} from './types';
import openNewTab from '../ModalsContent/References/utils/openNewTab';

const ReferenceLink = ({
  handleMouseOver,
  handleMouseOut,
}: ReferenceLinkProps) => {
  return (
    <ButtonForReferenceLink
      onMouseOver={handleMouseOver}
      onMouseOut={handleMouseOut}
      icon={'/images/arrow-up-right-from-square-solid.svg'}
      /* onClick={() => openNewTab(link)} */
    />
  );
};

const LanguageOptions = ({languages, link}: LanguageOptionsProps) => {
  const [isHovering, setIsHovering] = useState(false);

  const handleMouseOver = () => {
    setIsHovering(true);
  };

  const handleMouseLeave = () => {
    setIsHovering(false);
  };

  return (
    <>
      {!isHovering && (
        <ReferenceLink
          handleMouseOver={handleMouseOver}
          handleMouseOut={handleMouseLeave}
        />
      )}

      {isHovering && (
        <LanguagesWrapper
          onMouseOver={handleMouseOver}
          onMouseLeave={handleMouseLeave}>
          {languages.map((language, index) => (
            <StyledLanguagesTitle onClick={()=>openNewTab(link)
            } key={index} >
              {language}
              
            </StyledLanguagesTitle>
          ))}
        </LanguagesWrapper>
      )}
    </>
  );
};

export default LanguageOptions;

解决方案 #

问题核心是StyledLanguagesTitle作为<p>标签，默认宽度仅包裹内容，且自带默认margin，导致hover高亮无法填满父容器宽度。只需修改该组件的样式，让它占满父容器可用宽度，并优化视觉效果：

修改后的StyledLanguagesTitle样式：

export const StyledLanguagesTitle = styled.p`
  font-size: ${({theme}) => theme.typography.fontSize.medium};
  cursor: pointer;
  transition: background-color 0.3s;
  /* 占满父容器宽度 */
  width: 100%;
  /* 移除默认margin，消除高亮区域与父容器的间隙 */
  margin: 0;
  /* 添加内边距，扩大交互区域并优化视觉 */
  padding: 0.2rem 0.5rem;
  /* 可选：给高亮区域添加圆角，和父容器风格统一 */
  border-radius: 3px;
  /* 确保padding不会超出父容器范围 */
  box-sizing: border-box;
  
  &:hover {
    background-color: #526d82;
  }
`;

如果LanguagesWrapper的父容器有固定宽度，还可以给LanguagesWrapper添加width: 100%，确保它填满父容器空间，进一步保证子元素的宽度生效。

修改后，鼠标悬停时高亮效果会覆盖整个父组件宽度，同时内边距也让交互区域更友好。

内容的提问来源于stack exchange，提问作者Suleyman Eminbeyli