如何在单击区域 HREF 标签时创建活动事件(更改 BG 或创建边框)

Question

我在那个DIV里有一个div和一个img。
我有一个地图"area51"映射在该img和几个带有链接的area标签，左和右。

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

.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 边框或背景颜色设置区域标签的样式。 所以这是我作为替代方案所做的。 没有地图区域标签。只是一个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/