diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts
index 84630ae6b..c43bf3d07 100644
--- a/packages/tailwindcss/tests/ui.spec.ts
+++ b/packages/tailwindcss/tests/ui.spec.ts
@@ -305,6 +305,14 @@ async function render(page: Page, content: string) {
     }
   `)
 
+  // We noticed that some of the tests depending on the `hover:` variant were
+  // flaky. After some investigation, we found that injected elements had the
+  // `:hover` state without us explicitly hovering over the element.
+  //
+  // To avoid this, we now set up an explicit placeholder element to move the
+  // mouse to before running the tests.
+  content = `<div id="mouse-park" class="size-12"></div>${content}`
+
   await page.setContent(content)
   await page.addStyleTag({
     content: optimizeCss(
@@ -312,6 +320,8 @@ async function render(page: Page, content: string) {
     ),
   })
 
+  await page.locator('#mouse-park').hover()
+
   return {
     getPropertyValue(selector: string | [string, string], property: string) {
       return getPropertyValue(