如何在css/javascript中创建模式突出显示

我编写了简单的代码来创建元素的模式高亮显示

card.click(function(){
    cloak.show();
    var cardClone = card.clone();
    cloak.append(cardClone);
    cardClone.css({
        position: 'absolute',
      top: card.offset().top - 7,
      left: card.offset().left - 7,
    }).addClass('selected');

var名称=[
“阿伦”，
“阿杰什”，
“阿米特”
];
var div=$（“#卡”）；
变量斗篷=$（“#斗篷”）；
var-sel；
$。每个（名称、功能（i、obj）{
var card=$（''）.addClass（'spacetype'）.html（obj）；
附款（卡）；
卡片。单击（函数（）{
show（）；
var cardClone=card.clone（）；
斗篷附加（cardClone）；
cardClone.css({
位置：'绝对'，
顶部：card.offset（）.top-7，
左：card.offset（）.left-7，
}).addClass（“选定”）；
});
});
披风。单击（函数（）{
隐藏；
斗篷。空的（）；
})

正文{
背景图像：url（'http://placekitten.com/1024/678')
}
.spacetype{
显示：内联块；
高度：100px；
宽度：75px；
边框：1px纯黑；
填充：10px；
背景色：rgba（244250,54,6）；
保证金：5px；
字体大小：粗体；
边界半径：7px；
字体系列：Arial；
}
.选定{
边框：3倍纯黄色；
z指数：10；
}
#斗篷{
位置：绝对位置；
顶部：0px；
左：0px；
右：0px；
底部：0px；
背景色：rgba（0,0,0,0.3）；
显示：无；
填充：0；
}

---

据我所知，没有CSS唯一的方法可以做到这一点-您需要JavaScript来处理单击事件。不过，有一个更简单的解决方案可以避免克隆对象（我想这就是您想要的）

您可以使用

z-index

-属性将卡推到覆盖层上方。请注意，必须显式设置

位置
，以便
z-index
工作。
查看更新后的fiddle:
是的，您可以通过纯HTML/CSS执行类似操作，只是为了好玩：


正文{
背景图像：url（'http://placekitten.com/1024/678');
}
.spacetype{
显示：内联块；
位置：相对位置；
高度：100px；
宽度：75px；
边框：1px纯黑；
填充：10px；
背景色：rgba（24425540.6）；
保证金：5px；
字体大小：粗体；
边界半径：7px；
字体系列：Arial；
}
.spacetype:focus{
大纲：0；
z指数：10；
背景色：rgba（24425540.8）；
}
.spacetype:focus:after{
位置：绝对位置；
内容：''；
顶部：-1px；
右：-1px；
底部：-1px；
左：-1px；
边框：3倍纯黄色；
边界半径：7px；
}
.spacetype:focus~#斗篷{
位置：绝对位置；
显示：块；
顶部：0px；
左：0px；
右：0px；
底部：0px；
背景色：rgba（0,0,0,0.3）；
填充：0；
z指数：0；
指针事件：无；
}
arun
阿杰什
阿密特
JavaScript中的第16行和第21行以及CSS中的第15行。我更新了JavaScript，只处理类更改，不克隆对象，并且添加了
position:relative到卡类。可能相关的答案