ホバーの分岐にはメディアクエリのwidthではなくhoverを使おう

.link {
  background: rgba(0, 0, 0, 1);
}

@media (hover: hover) {
  .link:hover {
    background: rgba(0, 0, 0, 0.7);
  }
}

.link {
  background: rgba(0, 0, 0, 1);
}

@media (hover: hover) {
  .link {
    transform: scale(1.1);
  }
  .link:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1);
  }
}

const hasHover = window.matchMedia("(hover: hover)").matches;

if(hasHover) {
  /* ホバーできる場合の処理 */
}

/* FramerMotionのアニメーション用にstateを変更する場合 */

const Component = () => {
  const hasHover = window.matchMedia("(hover: hover)").matches;
  const [isHover, setHover] = useState(false)

  const onMouseEnter = useCallback(() => {
    if(hasHover) {
      setHover(true)
    }
  }, [])

  const onMouseLeave = useCallback(() => {
    if(hasHover) {
      setHover(false))
    }
  }, [])

  return (
    <a
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
    >
      {/* isHoverでアニメーションの出しわけ */}
      <motion.div />
    </a>
  )
}

/* Tailwindなどでクラス名を分岐させる場合 */

const Component = () => {
  const hasHover = window.matchMedia("(hover: hover)").matches;

  return (
    <a
      className={clsx(
        'text-white',
        hasHover && 'hover:opacity-75'
      )}
    >
      ...
    </a>
  )
}