嘗試尋找解決方案，但找不到任何有效/我理解的東西。
我有一個獲取樣式樣式組件的元素。它的正常 CSS 規則作業正常，但我希望對其應用懸停效果。不幸的是，我不確定如何使用 styled-components 使用的不同語法來做到這一點。
我有一個::hover:{...}規則，但是當我將滑鼠懸停在元素上時，它不會改變。
這是樣式組件 css：
//rules for a standard display (contains text that cant be directly edited)
export const EngravingDisplay = styled.p`
display: flex;
align-items: center;
justify-content: center;
width: ${props => props.inputWidth || "30px"};
height: ${props => props.inputHeight || "30px"};
margin: ${props => props.inputMargin || "5px"};
padding: ${props => props.inputpadding || "5px"};
text-align: center;
font-family: calibri;
font-size: 17px;
background-color: ${props => props.inputBackground || "rgba(100,60,60,1)"};
color: white;
border-radius: ${props => props.inputBorderRadius || "0px"};
::hover: {
background: rgb(255,255,0);
}
`;
然后，組件的 React/JSX：
<EngravingDisplay
name="char"
inputWidth="35px"
inputHeight="35px"
inputBorderRadius="100%"
inputMargin="-2px">
{charInfo.charProficiency}
</EngravingDisplay>
還有一張圖片（這個特殊的元素是帶有文字的綠色圓圈）：
uj5u.com熱心網友回復：
它沒有那么復雜。您只需要使用此語法而不是您的語法：
&: hover {...}
uj5u.com熱心網友回復：
我使用了錯誤的選擇器
Bms bharadwaj 指出我應該使用：
&: hover {...}
不是這個：
::hover: {...}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/408398.html
標籤：
上一篇：滑鼠移動影像層效果