<div class="name-box bg-red-500 hover:bg-red-700"></div>

.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
}

.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(185, 28, 28, var(--tw-bg-opacity));
}

看不懂这种写法，hover:bg-red-700和.hover\:bg-red-700:hover这两种写法都看不懂，class里面可以使用冒号吗？然后斜杠又是怎么回事呢？但是效果又是实实在在有的，求大佬解答，谢谢。