如何创建悬停效果并带来2个不同的<a href>标签？

<div class="hover-effect">
  <a href="https://www.example1.com">链接1</a>
  <a href="https://www.example2.com">链接2</a>
</div>

.hover-effect a {
  display: block;
  text-decoration: none;
  color: #000;
  padding: 10px;
}

.hover-effect a:hover {
  background-color: #f00;
  color: #fff;
}