javascript - 如何使用 css/javascript 在 <area> 标签中悬停

标签 javascript jquery html css

<分区>

我的代码

.x1:hover{
			background-color: rgb(30, 173, 104);
		}
<html>
<head>
	<link rel="stylesheet" href="assets/css/bootstrap.min.css"/>
	<style media="screen">
		.x1:hover{
			background-color: rgb(30, 173, 104);
		}
	</style>
</head>
<body>
<!-- Image Map Generated by http://www.image-map.net/ -->

<img src="imgmap.png" usemap="#image-map">

<map name="image-map">
    <area target="_self" alt="floor3" title="floor3" href="" coords="113,228,369,107,488,168,488,210,371,167,244,212,114,259,113,247,113,238" shape="poly">
    <area target="_self" alt="floor2" title="floor2" href="" coords="488,239,491,286,371,264,113,323,114,285,371,210,434,225" shape="poly">
    <area target="_self" alt="floor1" title="floor1" href="" coords="376,298,489,314,490,357,375,358,115,367,115,339" shape="poly">
    <area class="x1" target="" id="x1" alt="rooftop" title="rooftop" href="" coords="372,44,488,115,488,136,372,69,125,187,123,169" shape="poly" onmouseover=" document.map.style.backgroundColor = 'blue'; " onmouseout="x1.style.backgroundColor='transparent';"> document.body.style.backgroundColor = "red";
        </map>


    </body>
    </html>

如何在区域标签中添加悬停? , 任何人都可以帮助我吗?

最佳答案

你可以试试(每个标签区域都会有这个 css):

area:hover{
your css here
...
}

关于javascript - 如何使用 css/javascript 在 <area> 标签中悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49674582/

上一篇:html - 图片高度匹配容器

下一篇:html - SVG 不会缩放

相关文章:

javascript - JavaScript Hangman演示

javascript - 多按键无法使用 JS 正常工作

javascript - Angular ,将范围传递给函数(将范围作为变量传递?)

javascript - 是否可以选择 $(this) + $ ('#Example' )?

html - 将面板设置为低于图像 < 768px

javascript - 使用 jquery 获取原始 html 中的 html 表单输入值

javascript - 在 HTML 中绘制 2D 时遇到问题

javascript - 如何计算摩纳哥差异编辑器中更改的行数?

javascript - 多个文本字段,基于单选框选择显示/隐藏(Html,JS)

jquery - iOS 的 CSS 下拉菜单在单击和/或悬停时打开