在开发网站时，经常会使用CSS来美观网站的样式。但是，在使用CSS时，有时会导致DIV点击失效的问题。

<div style="background-color: red; width: 100px; height: 100px;" onclick="alert('点击生效！')">点我生效</div>

如上所示的代码，这是一个红色的正方形DIV，点击它会弹出一个提示框。但是，当我们在CSS中给这个DIV添加了以下样式：

div {
opacity: 0.5;
}

当我们刷新页面，再点击这个DIV，发现并没有弹出提示框。 这是因为，通过CSS设置了透明度，使这个DIV被半透明了，而且这个半透明效果会影响点击事件的触发范围，导致点击不生效。

如何解决这个问题呢？可以通过以下两种方法：

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

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

使用pointer-events:none;可以禁用鼠标事件，不会影响 DIV 的样式。这样就能够很好的避免DIV点击失效的问题。

方法二：使用div的伪类:before和:after:

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

这种方法使用DIV的伪类:before或:after，不会影响在其上点击的鼠标事件，能够很好的解决DIV点击失效的问题。

在开发网站时，需要注意在进行样式的设置时，不要忽略了DIV点击事件的影响。以上两种方法能够很好地解决这个问题，希望能够对大家有所帮助。