在開發(fā)網(wǎng)站時(shí)，經(jīng)常會(huì)使用CSS來(lái)美觀網(wǎng)站的樣式。但是，在使用CSS時(shí)，有時(shí)會(huì)導(dǎo)致DIV點(diǎn)擊失效的問(wèn)題。

<div style="background-color: red; width: 100px; height: 100px;" onclick="alert('點(diǎn)擊生效！')">點(diǎn)我生效</div>

如上所示的代碼，這是一個(gè)紅色的正方形DIV，點(diǎn)擊它會(huì)彈出一個(gè)提示框。但是，當(dāng)我們?cè)贑SS中給這個(gè)DIV添加了以下樣式：

div {
opacity: 0.5;
}

當(dāng)我們刷新頁(yè)面，再點(diǎn)擊這個(gè)DIV，發(fā)現(xiàn)并沒(méi)有彈出提示框。 這是因?yàn)?，通過(guò)CSS設(shè)置了透明度，使這個(gè)DIV被半透明了，而且這個(gè)半透明效果會(huì)影響點(diǎn)擊事件的觸發(fā)范圍，導(dǎo)致點(diǎn)擊不生效。

如何解決這個(gè)問(wèn)題呢？可以通過(guò)以下兩種方法：

方法一：使用 pointer-events:none;

div {
opacity: 0.5;
pointer-events:none;
}

使用pointer-events:none;可以禁用鼠標(biāo)事件，不會(huì)影響 DIV 的樣式。這樣就能夠很好的避免DIV點(diǎn)擊失效的問(wèn)題。

方法二：使用div的偽類:before和:after:

div:before {
content:"";
width:100%;
height:100%;
position:absolute;
z-index:-1;
opacity:0.5;
}

這種方法使用DIV的偽類:before或:after，不會(huì)影響在其上點(diǎn)擊的鼠標(biāo)事件，能夠很好的解決DIV點(diǎn)擊失效的問(wèn)題。

在開發(fā)網(wǎng)站時(shí)，需要注意在進(jìn)行樣式的設(shè)置時(shí)，不要忽略了DIV點(diǎn)擊事件的影響。以上兩種方法能夠很好地解決這個(gè)問(wèn)題，希望能夠?qū)Υ蠹矣兴鶐椭?/p>