fix problem hover

src/index.css

@@ -120,3 +120,35 @@ div.stf__item.page,
 .flipbook-container .page {
   border-radius: 0;
 }
+
+/* جلوگیری از نمایش محتوای صفحات غیرفعال هنگام هاور */
+.flipbook-container .stf__item {
+  overflow: hidden !important;
+  isolation: isolate;
+  contain: layout style paint;
+}
+
+/* اطمینان از overflow hidden برای محتوای صفحات */
+.flipbook-container .stf__item .page {
+  overflow: hidden !important;
+  position: relative;
+  isolation: isolate;
+}
+
+/* مخفی کردن محتوای صفحات غیرفعال - فقط صفحه فعلی قابل تعامل است */
+.flipbook-container .stf__wrapper {
+  overflow: hidden;
+  isolation: isolate;
+}
+
+/* جلوگیری از نمایش محتوای صفحات پشت صفحه فعلی */
+.flipbook-container .stf__item {
+  pointer-events: none;
+}
+
+/* فعال کردن pointer events فقط برای صفحه فعلی */
+.flipbook-container .stf__item.stf__item--active,
+.flipbook-container .stf__item:hover {
+  pointer-events: auto;
+  z-index: 100;
+}

src/pages/viewer/components/BookPage.tsx

@@ -412,6 +412,8 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(({ page, scale = 1 },
         boxSizing: 'border-box',
         width: `${794 * scale}px`,
         height: `${1123 * scale}px`,
+        isolation: 'isolate',
+        zIndex: 1,
       }}
     >
       {page.elements.map((element, index) => renderObject(element, index))}

src/pages/viewer/components/BookViewer.tsx

@@ -46,7 +46,7 @@ const BookViewer: FC<BookViewerProps> = ({ pages }) => {
     return (
         <div className="flex flex-col items-center gap-4 md:gap-6 w-full h-full" dir="rtl">
             {/* نمایش کتاب */}
-            <div className="relative w-full flex justify-center flex-1 items-center">
+            <div className="relative w-full flex justify-center flex-1 items-center" style={{ overflow: 'hidden' }}>
                 {/* Border و Shadow عمودی در وسط کتاب */}
                 <div
                     className="absolute inset-y-0 left-1/2 -translate-x-1/2 w-px border-r border-gray-300 pointer-events-none z-50"
@@ -54,6 +54,7 @@ const BookViewer: FC<BookViewerProps> = ({ pages }) => {
                         boxShadow: '-5px 0 15px rgba(0, 0, 0, 0.15), 5px 0 15px rgba(0, 0, 0, 0.15)'
                     }}
                 />
+                <div style={{ overflow: 'hidden', isolation: 'isolate' }}>
                 <HTMLFlipBook
                     ref={bookRef}
                     width={397}
@@ -87,6 +88,7 @@ const BookViewer: FC<BookViewerProps> = ({ pages }) => {
                             <BookPage key={page.id} page={page} scale={0.5} />
                         ))}
                 </HTMLFlipBook>
+                </div>
             </div>
 
             {/* کنترل‌های ناوبری */}