fix fuzzy style hover bug

This commit is contained in:
Gabe Yuan
2023-09-02 19:55:26 +08:00
parent 6bb742f828
commit 536b58bf67

View File

@@ -17,6 +17,7 @@ import styled from "styled-components";
const LineSpan = styled.span` const LineSpan = styled.span`
opacity: 0.6; opacity: 0.6;
-webkit-opacity: 0.6;
text-decoration-line: underline; text-decoration-line: underline;
text-decoration-style: ${(props) => props.$lineStyle}; text-decoration-style: ${(props) => props.$lineStyle};
text-decoration-color: ${(props) => props.$lineColor}; text-decoration-color: ${(props) => props.$lineColor};
@@ -29,23 +30,22 @@ const LineSpan = styled.span`
-webkit-text-underline-offset: 0.3em; -webkit-text-underline-offset: 0.3em;
&:hover { &:hover {
opacity: 1; opacity: 1;
-webkit-opacity: 1;
} }
`; `;
const FuzzySpan = styled.span` const FuzzySpan = styled.span`
filter: blur(5px); filter: blur(5px);
transition: filter 0.2s ease-in-out; -webkit-filter: blur(5px);
&hover: { &:hover {
filter: none; filter: none;
-webkit-filter: none;
} }
`; `;
const HighlightSpan = styled.span` const HighlightSpan = styled.span`
color: #fff; color: #fff;
background-color: ${(props) => props.$bgColor}; background-color: ${(props) => props.$bgColor};
&hover: {
filter: none;
}
`; `;
const DiySpan = styled.span` const DiySpan = styled.span`