javascript - 如何在点击 AREA HREF 标签时创建 Activity 事件(更改 BG 或创建边框)？

Question

我在那个 DIV 中有一个 div 和一个 img。
我在那个 img 中映射了一张 map “area51”，还有几个带有链接的 area 标签，分别是 LEFT 和 RIGHT。

目标输出:能够在被点击的区域弹出黄色背景颜色或在悬停的所述区域周围弹出红色边框。

HTML:

<div class="LifestyleMoSub" width="320" height="120">
    <img width="320" height="120" class="LifestyleMoImg" src="http://placehold.it/300x200&text=mobile" border="0" usemap="#area51"/>
</div>

<!-- EDIT: added codes below -->    
<br />
<div class="emptyDiv"></div>

CSS:

area:hover {
    border: 1px solid red;
}

area:active {
    background-color: yellow;
}

/* EDIT: added codes below */
.emptyDiv {
    width: 320px; 
    height: 120px; 
    border: 1px solid red;    
}
.emptyDiv:hover {
    background-color: yellow;
}
.emptyDiv:active {
    background-color: blue;
}    

任何帮助将不胜感激。 CSS 解决方案是非常受欢迎的。简单的JS/JQuery还是可以考虑的。移动点击选项也很高兴知道。 :)

https://jsfiddle.net/philcyb/b5coxcc3/3/

Answer 1

经过全面测试，我无法使用 css 边框或背景颜色来设置样式区域标签。所以这就是我作为替代方案所做的。没有 map 区域标签。只是一个 div 中的简单 img，悬停时显示红色边框，单击时显示蓝色边框。

HTML:

<div class="LifestyleMoSub" width="320" height="120">
    <a href="#">
        <img width="320" height="120" class="LifestyleMoImg" src="http://placehold.it/300x200&text=mobile" border="0"/>
    </a>
</div>

CSS:

.LifestyleMoSub {
    width: 320px; 
    height: 120px; 
}
.LifestyleMoSub:hover img {
    width: 318px; 
    height: 118px; 
    border: 1px solid red;    
}
.LifestyleMoSub:active img {
    width: 318px; 
    height: 118px; 
    border: 1px solid blue;    
} 

https://jsfiddle.net/philcyb/b5coxcc3/4/