diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index 1c01553a..8888ddc2 100644
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -96,6 +96,7 @@ const Board = () => {
   const [commentCid, setCommentCid] = useState(null);
   const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
   const [openMenuCid, setOpenMenuCid] = useState(null);
+  const [outOfViewCid, setOutOfViewCid] = useState(null);
 
   const [errorMessage, setErrorMessage] = useState(null);
   const [successMessage, setSuccessMessage] = useState(null);
@@ -971,8 +972,11 @@ const Board = () => {
                                   <Link key={`ql-${index}`}
                                   to={() => {}} className="quote-link" 
                                   onClick={(event) => handleQuoteClick(reply, null, event)}
-                                  onMouseOver={(event) => handleQuoteHover(reply, null, event)}
-                                  onMouseLeave={removeHighlight}>
+                                  onMouseOver={() => handleQuoteHover(reply, null, (cid) => setOutOfViewCid(cid))}
+                                  onMouseLeave={() => {
+                                    removeHighlight();
+                                    setOutOfViewCid(null);
+                                  }}>
                                     c/{reply.shortCid}</Link>
                                     &nbsp;
                                   </div>
@@ -1193,8 +1197,11 @@ const Board = () => {
                                     <Link to={() => {}} key={`ql-${index}`}
                                       className="quote-link" 
                                       onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
-                                      onMouseOver={(event) => handleQuoteHover(reply, reply.shortCid, event)}
-                                      onMouseLeave={removeHighlight}>
+                                      onMouseOver={() => handleQuoteHover(reply, reply.shortCid, (cid) => setOutOfViewCid(cid))}
+                                      onMouseLeave={() => {
+                                      removeHighlight();
+                                      setOutOfViewCid(null);
+                                    }}>
                                       c/{reply.shortCid}</Link>
                                       &nbsp;
                                     </div>
@@ -1262,8 +1269,11 @@ const Board = () => {
                                 <blockquote key={`pm-${index}`} comment={reply} className="post-message">
                                   <Link to={() => {}} key={`r-pm-${index}`} className="quotelink" 
                                   onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
-                                  onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, event)}
-                                  onMouseLeave={removeHighlight}>
+                                  onMouseOver={() => handleQuoteHover(reply, shortParentCid, (cid) => setOutOfViewCid(cid))}
+                                  onMouseLeave={() => {
+                                    removeHighlight();
+                                    setOutOfViewCid(null);
+                                  }}>
                                       {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
                                   </Link>
                                   <Post content={reply.content?.slice(0, 500)} key={`post-${index}`} />
@@ -1284,8 +1294,11 @@ const Board = () => {
                             : <blockquote key={`pm-${index}`} className="post-message">
                                 <Link to={() => {}} key={`r-pm-${index}`} className="quotelink" 
                                 onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
-                                onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, event)}
-                                onMouseLeave={removeHighlight}>
+                                onMouseOver={() => handleQuoteHover(reply, shortParentCid, (cid) => setOutOfViewCid(cid))}
+                                onMouseLeave={() => {
+                                  removeHighlight();
+                                  setOutOfViewCid(null);
+                                }}>
                                     {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
                                 </Link>
                                 <Post content={reply.content} key={`post-${index}`} comment={reply} />
@@ -1584,8 +1597,11 @@ const Board = () => {
                               <blockquote key={`mob-pm-${index}`} className="post-message">
                                 <Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink" 
                                 onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
-                                onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, event)}
-                                onMouseLeave={removeHighlight}>
+                                onMouseOver={() => handleQuoteHover(reply, shortParentCid, (cid) => setOutOfViewCid(cid))}
+                                onMouseLeave={() => {
+                                  removeHighlight();
+                                  setOutOfViewCid(null);
+                                }}>
                                   {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
                                 </Link>
                                 <Post content={reply.content?.slice(0, 500)} key={`post-mobile-${index}`} comment={reply} />
@@ -1606,8 +1622,11 @@ const Board = () => {
                           : <blockquote key={`mob-pm-${index}`} className="post-message">
                               <Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink" 
                               onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
-                              onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, event)}
-                              onMouseLeave={removeHighlight}>
+                              onMouseOver={() => handleQuoteHover(reply, shortParentCid, (cid) => setOutOfViewCid(cid))}
+                              onMouseLeave={() => {
+                                removeHighlight();
+                                setOutOfViewCid(null);
+                              }}>
                                 {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
                               </Link>
                               <Post content={reply.content} key={`post-mobile-${index}`} comment={reply} />
@@ -1627,8 +1646,11 @@ const Board = () => {
                                 <div key={`div-back${index}`} style={{display: 'inline-block'}}>
                                 <Link key={`ql-${index}`} to={() => {}}
                                 onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
-                                onMouseOver={(event) => handleQuoteHover(reply, reply.shortCid, event)}
-                                onMouseLeave={removeHighlight} 
+                                onMouseOver={() => handleQuoteHover(reply, reply.shortCid, (cid) => setOutOfViewCid(cid))}
+                                onMouseLeave={() => {
+                                  removeHighlight();
+                                  setOutOfViewCid(null);
+                                }} 
                                 className="quote-link">
                                   c/{reply.shortCid}</Link>
                                   &nbsp;
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index f005df9f..f4568af6 100644
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -90,6 +90,7 @@ const Thread = () => {
   const [commentCid, setCommentCid] = useState(null);
   const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
   const [openMenuCid, setOpenMenuCid] = useState(null);
+  const [outOfViewCid, setOutOfViewCid] = useState(null);
   
   useError(errorMessage, [errorMessage]);
   useSuccess(successMessage, [successMessage]);
@@ -926,8 +927,11 @@ const Thread = () => {
                               <span style={{cursor: 'pointer'}} key={`ql-${index}`}
                                 className="quote-link" 
                                 onClick={(event) => handleQuoteClick(reply, null, event)}
-                                onMouseOver={(event) => handleQuoteHover(reply, null, event)}
-                                onMouseLeave={removeHighlight}>
+                                onMouseOver={() => handleQuoteHover(reply, null, (cid) => setOutOfViewCid(cid))}
+                                onMouseLeave={() => {
+                                  removeHighlight();
+                                  setOutOfViewCid(null);
+                                }}>
                                 c/{reply.shortCid}</span>
                                 &nbsp;
                               </div>
@@ -1111,8 +1115,11 @@ const Thread = () => {
                                   <span style={{cursor: 'pointer'}} key={`ql-${index}`}
                                     className="quote-link" 
                                     onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
-                                    onMouseOver={(event) => handleQuoteHover(reply, reply.shortCid, event)}
-                                    onMouseLeave={removeHighlight}>
+                                    onMouseOver={() => handleQuoteHover(reply, reply.shortCid, (cid) => setOutOfViewCid(cid))}
+                                    onMouseLeave={() => {
+                                      removeHighlight();
+                                      setOutOfViewCid(null);
+                                    }}>
                                     c/{reply.shortCid}</span>
                                     &nbsp;
                                   </div>
@@ -1177,8 +1184,11 @@ const Thread = () => {
                               onClick={(event) => {
                                 handleQuoteClick(reply, shortParentCid, comment.shortCid, event);
                               }}
-                              onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, comment.shortCid, event)}
-                              onMouseLeave={removeHighlight}
+                              onMouseOver={() => handleQuoteHover(reply, shortParentCid, (cid) => setOutOfViewCid(cid))}
+                              onMouseLeave={() => {
+                                removeHighlight();
+                                setOutOfViewCid(null);
+                              }}
                               >
                               {`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
                             </span>
@@ -1422,9 +1432,12 @@ const Thread = () => {
                           ) : null}
                         <blockquote key={`mob-pm-${index}`} className="post-message-mobile">
                           <span style={{cursor: 'pointer'}} key={`mob-ql-${index}`} className="quotelink-mobile" 
-                          onClick={(event) => handleQuoteClick(reply, shortParentCid, comment.shortCid, event)}
-                          onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, comment.shortCid, event)}
-                          onMouseLeave={removeHighlight}>
+                          onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
+                          onMouseOver={() => handleQuoteHover(reply, shortParentCid, (cid) => setOutOfViewCid(cid))}
+                          onMouseLeave={() => {
+                            removeHighlight();
+                            setOutOfViewCid(null);
+                          }}>
                             {`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
                           </span>
                           <Post content={reply.content} comment={reply} key={`post-mobile-${index}`} />
@@ -1443,8 +1456,11 @@ const Thread = () => {
                             <div key={`div-back${index}`} style={{display: 'inline-block'}}>
                             <span style={{cursor: 'pointer'}} key={`ql-${index}`} className="quote-link" 
                             onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
-                            onMouseOver={(event) => handleQuoteHover(reply, reply.shortCid, event)}
-                            onMouseLeave={removeHighlight}>
+                            onMouseOver={() => handleQuoteHover(reply, reply.shortCid, (cid) => setOutOfViewCid(cid))}
+                            onMouseLeave={() => {
+                              removeHighlight();
+                              setOutOfViewCid(null);
+                            }}>
                               c/{reply.shortCid}</span>
                               &nbsp;
                             </div>
diff --git a/src/utils/handleQuoteHover.js b/src/utils/handleQuoteHover.js
index c8d084c9..63719577 100644
--- a/src/utils/handleQuoteHover.js
+++ b/src/utils/handleQuoteHover.js
@@ -1,4 +1,4 @@
-function handleQuoteHover(reply, parentCid) {
+function handleQuoteHover(reply, parentCid, onElementOutOfView) {
   const cid = parentCid ? parentCid : reply.shortCid;
   const isMobile = window.innerWidth <= 480;
   const postNumberSelector = isMobile ? '.post-number-mobile' : '.post-number-desktop';
@@ -23,6 +23,7 @@ function handleQuoteHover(reply, parentCid) {
     };
 
     if (isInViewport(targetElement)) {
+      onElementOutOfView(cid);
       const highlightedElements = document.querySelectorAll('.highlighted');
 
       highlightedElements.forEach(el => {