html - 图像上的下拉菜单
问题描述
我正在尝试在图像中获取下拉菜单,因此当用户将鼠标悬停在一个区域上时,他们将看到一个列表,当他们转到另一个区域时,他们将看到另一个不同的选项列表。想象一张世界地图,用户可以将鼠标悬停在各个国家/地区上并显示一个下拉列表。我有以下代码,这几乎是我想要的,但下拉列表位于图像之外,因此用户无法选择任何内容。
非常感谢任何帮助。
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
<!DOCTYPE html>
<html>
<img src="https://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<div class="dropdown">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="#">
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<area shape="circle" coords="90,58,3" alt="Mercury" href="#" data-reveal-id="two">
<div class="dropdown">
<area shape="circle" coords="124,58,8" alt="Venus" href="#" data-reveal-id="three">
<div class="dropdown-content">
<a href="#">Link 4</a>
<a href="#">Link 5</a>
<a href="#">Link 6</a>
</div>
</map>
解决方案
.dropdown-content
只需为您的班级添加一个快速转换
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: relative;
transform: translate(-95%, -12%);
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
<!DOCTYPE html>
<html>
<img src="https://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<div class="dropdown">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="#">
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<area shape="circle" coords="90,58,3" alt="Mercury" href="#" data-reveal-id="two">
<div class="dropdown">
<area shape="circle" coords="124,58,8" alt="Venus" href="#" data-reveal-id="three">
<div class="dropdown-content">
<a href="#">Link 4</a>
<a href="#">Link 5</a>
<a href="#">Link 6</a>
</div>
</map>
推荐阅读
- javascript - 使用jquery在html中搜索文件名
- unit-testing - 对组合物的模拟使用 spocks 方法计数器?
- c++ - 带默认参数的 initializer_list 构造函数
- ruby-on-rails - Rails 多个单选按钮
- amazon-web-services - 如何获取 AWS 实例的动态成本?
- macos - Mac OS 上的 ZSH 设置
- dotnet-httpclient - 来自rest api的错误请求here maps
- python-3.x - Py charm 冻结图未将 8 个变量转换为常量操作
- android - 隐式 Intent 的安全性如何?
- javascript - 超过 1 个系列的 Highchart 显示未显示