css实现扩大选中范围
HTML
<style type="text/css">
<!-- 大盒子样式 -->
.content{
position: relative;
width: 60%;
height: 400px;
margin: 0 auto;
border: 1px solid orange;
}
<!-- 关闭按钮样式 -->
.closeIcon{
position: absolute;
top: 20px;
right: 20px;
color: red;
font-weight: 800;
cursor: pointer;
}
</style>
<div class="content">
<span class="closeIcon">
X
</span>
</div>
-
通过padding来实现
.closeIcon{ padding: 15px;//设置padding大小来控制扩大的范围 }
-
通过border大小来实现
.closeIcon{ border: 10px solid transparent;//设置border大小来控制扩大的范围,颜色设置为透明 }
-
通过伪元素来实现(推荐)
.closeIcon::after{ content: ''; position: absolute; top: -15px;//设置top,left,right,bottom大小来控制扩大的范围 left: -15px; right: -15px; bottom: -15px; }
JavaScript
<script>
let closeIcon = document.querySelector(".closeIcon");
closeIcon.addEventListener('click',()=>{
alert("success")
})
</script>