CSS點擊劃過顯示div，是前端開發中常用的互動效果。通過CSS的hover屬性可以實現鼠標懸停在某個元素上時，顯示出相應的div。

代碼如下：
HTML部分：
<div class="container">
<div class="box">
<p>點擊我劃過我</p>
<div class="content">
<p>這是一個隱藏的div</p>
</div>
</div>
</div>
CSS部分：
.container{
width: 500px;
height: 300px;
border: 1px solid #ddd;
}
.box{
width: 100px;
height: 100px;
border: 1px solid #333;
text-align: center;
line-height: 100px;
position: relative;
}
.box:hover .content{
display: block;
}
.content{
display: none;
width: 200px;
height: 100px;
border: 1px solid #333;
position: absolute;
top: 50px;
left: 50px;
}

以上代碼中，我們首先創建一個容器元素container，并在其中添加一個box元素。box元素中包含一個p元素和一個content元素。p元素是用來顯示“點擊我劃過我”的文本內容，而content元素則是用來顯示隱藏的div。

為了實現點擊劃過顯示div的效果，我們使用了CSS的hover屬性。當鼠標懸停在box元素上時，就會觸發.box:hover .content選擇器的樣式，將content元素的display屬性設為block，從而讓內容顯示出來。

與此同時，我們還利用了CSS的position屬性和top、left屬性，將content元素定位在box元素的中心位置。

總之，利用CSS的hover屬性和position屬性，我們可以輕松實現點擊劃過顯示div的效果，為網頁帶來更多的互動性。