diff --git a/apps/readest-app/src/app/reader/components/FooterBar.tsx b/apps/readest-app/src/app/reader/components/FooterBar.tsx
index 1850c64a..ff8c9a53 100644
--- a/apps/readest-app/src/app/reader/components/FooterBar.tsx
+++ b/apps/readest-app/src/app/reader/components/FooterBar.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import clsx from 'clsx';
 import { RiArrowLeftWideLine, RiArrowRightWideLine } from 'react-icons/ri';
 import { RiArrowGoBackLine, RiArrowGoForwardLine } from 'react-icons/ri';
@@ -122,6 +122,12 @@ const FooterBar: React.FC<FooterBarProps> = ({
     }
   };
 
+  useEffect(() => {
+    if (hoveredBookKey !== bookKey) {
+      setActionTab('');
+    }
+  }, [hoveredBookKey, bookKey]);
+
   const getMarginProgressValue = (marginPx: number, gapPercent: number) => {
     return (marginPx / 88 + gapPercent / 10) * 50;
   };
diff --git a/apps/readest-app/src/components/Button.tsx b/apps/readest-app/src/components/Button.tsx
index cadf7314..853bb538 100644
--- a/apps/readest-app/src/components/Button.tsx
+++ b/apps/readest-app/src/components/Button.tsx
@@ -1,5 +1,6 @@
-import React from 'react';
 import clsx from 'clsx';
+import React from 'react';
+import { useEnv } from '@/context/EnvContext';
 
 interface ButtonProps {
   icon: React.ReactNode;
@@ -18,6 +19,7 @@ const Button: React.FC<ButtonProps> = ({
   tooltipDirection = 'top',
   className,
 }) => {
+  const { appService } = useEnv();
   return (
     <div
       className={clsx(
@@ -32,6 +34,7 @@ const Button: React.FC<ButtonProps> = ({
       <button
         className={clsx(
           'btn btn-ghost h-8 min-h-8 w-8 p-0',
+          appService?.isMobileApp && 'hover:bg-transparent',
           disabled && 'btn-disabled !bg-transparent',
           className,
         )}