我编写了简单的代码来创建元素的模式突出显示。
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 names = [
'arun',
'ajesh',
'amit'
];
var div = $('#card');
var cloak = $('#cloak');
var sel;
$.each(names, function(i, obj){
var card = $('<div/>').addClass('spacetype').html(obj);
div.append(card);
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');
});
});
cloak.click(function(){
cloak.hide();
cloak.empty();
})body {
background-image: url('http://placekitten.com/1024/678')
}
.spacetype {
display: inline-block;
height: 100px;
width: 75px;
border: 1px solid black;
padding: 10px;
background-color: rgba(244,250,54, .6);
margin: 5px;
font-weight: bold;
border-radius: 7px;
font-family: Arial;
}
.selected {
border: 3px solid yellow;
z-index: 10;
}
#cloak {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0,0,0, 0.3);
display: none;
padding: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="card">
</div>
<div id="cloak"></div>逻辑很简单。
与克隆DOM元素相反，有没有一种简单的CSS方法可以实现这一目标？
据我所知，没有唯一的CSS方式可以执行此操作-您将需要JavaScript来处理点击事件。但是，对于您的问题，有一个更简单的解决方案，它避免了克隆对象（我想这就是您想要的）。
您可以只使用z-index-property将卡推到覆盖层上方。请注意，您必须显式设置positionforz-index才能工作。请参阅更新的小提琴：https：//jsfiddle.net/9ew7aq4v/1/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句