Javascript 如何单击AREA HREF标记创建活动事件（更改背景或创建边框）？

我有一个div和一个img。 我有一个地图area51映射在那个img和一对带有链接的区域标签，左和右

目标输出：能够在点击区域弹出黄色背景色，或在所述悬停区域周围弹出红色边框

HTML:

任何帮助都将不胜感激。CSS解决方案是首选。仍然可以考虑使用简单的JS/JQuery。您还可以选择手机上网：

---

经过彻底的测试后，我无法实现用css边框或背景色设置区域标记的样式。这是我做的另一个选择。没有地图区域标记。在div中只需一个简单的img，悬停时显示红色边框，单击时显示蓝色边框

HTML:

---

我想知道这和我提到的随叫随到事件有什么关系。我在想可能会有不同的代码？@Philcyb你能发布更多的代码吗？因为我无法在你发布的代码中获得class=LifestyleMoSub和class=LifestyleMoImg的css类。否则，js fiddle将是相同的best@Kailas-我添加了一个JSFIDLE链接，以使我的目标输出可以理解。如果你能打开提琴，看到空的提琴，那就是我想要的生活方式主题曲。

<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>

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;
}    

<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>

.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;    
}