您需要检查元素是否溢出
添加用户参考：

const refs = useRef(listArray.map(() => React.createRef()));

那么你应该创建一个函数来检查元素是否溢出：

const isOverflown = (el) => {
    if(!el) return;
    const { clientWidth, clientHeight, scrollWidth, scrollHeight } = el;
    return scrollHeight > clientHeight || scrollWidth > clientWidth;
  }

然后需要根据isOverflated值添加类：

const listsForFrontPage = listArray.map((book, id) => {
    return (
      <Link className="book-link" to={`/books/${book.book_id}`} key={id}>
        <div className="book-card">
          <div className="book-card-image">
            <img
              className="cover-image"
              src={book.cover_image}
              alt="The book cover"
            />
          </div>
          <div className="book-info">
            <div ref={refs.current[id]} className={`book-title ${isOverflown(refs.current[id].current) ? 'book-title-overflow' : ''}`}>{book.title}</div>
            <div className="author-name">{book.name}</div>
          </div>
        </div>
      </Link>
    )
  })

别忘了加上你的css：

.book-title-overflow:hover{
  height: 6rem;
  overflow: visible;
}