我試圖創(chuàng)建一個(gè)語(yǔ)言選項(xiàng)組件。它將語(yǔ)言代碼垂直放置在父組件中，如下所示:

當(dāng)我將鼠標(biāo)懸停在語(yǔ)言選項(xiàng)上時(shí)，它會(huì)高亮顯示字母代碼(一個(gè)單獨(dú)的樣式組件)。我不知道如何讓它覆蓋父組件的寬度。

代碼如下:

造型:

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;

我試著玩CSS，但是沒(méi)有用

這里的問(wèn)題是你有一個(gè)填充:0.3在你的語(yǔ)言Wrapper中應(yīng)用。此填充將把LanguagesWrapper的任何子級(jí)推進(jìn)0.3個(gè)單位，這意味著子級(jí)將填充其父級(jí)的寬度減去每側(cè)的0.3個(gè)單位。

要使懸停效果填充父級(jí)的整個(gè)寬度，您需要改為在StyledLanguagesTitle組件上聲明padding: 0.3rem。

import styled from 'styled-components';

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

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

在提供的代碼片段中，我做了必要的調(diào)整。LanguagesWrapper現(xiàn)在只處理背景顏色、邊框半徑、flex屬性和子控件之間的間隙。StyledLanguagesTitle組件具有padding: 0.3rem聲明和懸停效果樣式。

請(qǐng)注意，您可能需要根據(jù)您的具體要求調(diào)整填充值，因?yàn)槿绻麘?yīng)用于所有語(yǔ)言標(biāo)題，如& quot恩& quot，& quotFR & quot，& quot德& quot，& quot它& quot。

我希望這能為你澄清這個(gè)問(wèn)題。