Merge pull request #13693 from guardian/doml/fix-sublink-hover-styles

Fix sublink hover styles

Author: domlander

dotcom-rendering/src/components/Card/components/CardWrapper.tsx

@@ -59,6 +59,9 @@ const sublinkHoverStyles = css`
 		.card-headline .show-underline {
 			text-decoration: none;
 		}
+		.image-overlay {
+			background-color: transparent;
+		}
 	}
 `;
 

dotcom-rendering/src/components/FeatureCard.tsx

@@ -78,6 +78,18 @@ const hoverStyles = css`
 	}
 `;
 
+/** When we hover on sublinks, we want to prevent the general hover styles applying */
+const sublinkHoverStyles = css`
+	:has(ul.sublinks:hover) {
+		.card-headline .show-underline {
+			text-decoration: none;
+		}
+		.image-overlay {
+			background-color: transparent;
+		}
+	}
+`;
+
 const contentStyles = css`
 	display: flex;
 	flex-basis: 100%;
@@ -332,7 +344,7 @@ export const FeatureCard = ({
 	return (
 		<FormatBoundary format={format}>
 			<ContainerOverrides containerPalette={containerPalette}>
-				<div css={[baseCardStyles, hoverStyles]}>
+				<div css={[baseCardStyles, hoverStyles, sublinkHoverStyles]}>
 					{!showYoutubeVideo && (
 						<CardLink
 							linkTo={linkTo}