html - 图像类型下拉菜单的悬停 CSS

Question

背景

我正在创建一个显示亚洲地区的下拉菜单。
图片的每个部分都应将用户重定向到指定的链接。

想要达到的效果

当用户将鼠标放在该区域上时，图像应该变为橙色。

图片

正常状态 (newmenu.png)

悬停状态 (newmenu_hover.png)

尝试完成的方法

如果我将图像切割成 8 个小块，将花费一些时间。所以我决定使用 CSS background-position 来完成它。

---

问题

如下图。所有链接显示蓝色中国。
当我将鼠标放在它上面时，它会变成橙色的中国。

#newmenu {
  line-height: 24px;
}

#newmenu a:link, #newmenu a:visited {
  display: block;
  width: 183px;
  text-decoration: none;
  background-image: url(http://holland.pk/uptow/i4/5e185e55196d23e27ebb99c4a0b55909.png);
}

#newmenu a:hover, #newmenu a:active {
  display: block;
  width: 183px;
  text-decoration: none;
  background-image: url(http://holland.pk/uptow/i4/48bd4dd0bb862be01d047f4d38296e4e.png);
}

#newmenu .newmenu_china {
  height: 24px;
  background-position: 0px 0px;
}

#newmenu .newmenu_hongkong {
  height: 24px;
  background-position: 0px 24px;
}

#newmenu .newmenu_macau {
  height: 24px;
  background-position: 0px 48px;
}

#newmenu .newmenu_singapore {
  height: 24px;
  background-position: 0px 72px;
}

<hr>

## Problems ##

As shown in the following image. All links show blue China.<br>
When I put my mouse onto it, it will changed to orange China.

[![Problem][3]][3]

<hr>

## Source Code (background-url edited) ##

<div class="downmenu" id="newmenu">
  <a href="./china.php" id="newmenu_china" target="_blank">&nbsp;</a>
  <a href="./hongkong.php" id="newmenu_hongkong" target="_blank">&nbsp;</a>
  <a href="./macau.php" id="newmenu_macau" target="_blank">&nbsp;</a>
  <a href="./singapore.php" id="newmenu_singapore" target="_blank">&nbsp;</a>
</div>

Answer 1

您的链接 ID 是 ID，因此您只需编辑 CSS

#newmenu {
  line-height: 24px;
}

#newmenu a:link, #newmenu a:visited {
  display: block;
  width: 183px;
  text-decoration: none;
  background-image: url(http://holland.pk/uptow/i4/5e185e55196d23e27ebb99c4a0b55909.png);
}

#newmenu a:hover, #newmenu a:active {
  display: block;
  width: 183px;
  text-decoration: none;
  background-image: url(http://holland.pk/uptow/i4/48bd4dd0bb862be01d047f4d38296e4e.png);
}

#newmenu #newmenu_china {
  height: 24px;
  background-position: 0px 0px;
}

#newmenu #newmenu_hongkong {
  height: 24px;
  background-position: 0px 24px;
}

#newmenu #newmenu_macau {
  height: 24px;
  background-position: 0px 48px;
}

#newmenu #newmenu_singapore {
  height: 24px;
  background-position: 0px 72px;
}

<hr>

<div class="downmenu" id="newmenu">
  <a href="./china.php" id="newmenu_china" target="_blank">&nbsp;</a>
  <a href="./hongkong.php" id="newmenu_hongkong" target="_blank">&nbsp;</a>
  <a href="./macau.php" id="newmenu_macau" target="_blank">&nbsp;</a>
  <a href="./singapore.php" id="newmenu_singapore" target="_blank">&nbsp;</a>
</div>