怎样用css实现div选中的效果

html-css07

怎样用css实现div选中的效果,第1张

不懂这儿的选中是鼠标点击还是覆盖或者是点击之后的效果,因此就都说一下:\x0d\x0a1.被点击时的效果可以用div:active{ css }\x0d\x0a\x0d\x0a2.鼠标覆盖在上面的时候可以用div：hover{ css}\x0d\x0a\x0d\x0a3.点击之后的效果，这个相对前2种有些麻烦，必须用到JS或者jquery，步骤如下：\x0d\x0a\x0d\x0aa.先给div添加一个选中的样式比如on{css}；\x0d\x0a\x0d\x0ab.然后在js中$('div').click(function{\x0d\x0a$('div').toggleClass(' ','on')\x0d\x0a})\x0d\x0a这是jquery自带的一个方法，点击div切换2个class,

首先先看一下我们要实现的效果

用到的属性

但是通常我们还会添加 pointer-events: none 来禁用掉对应div

但是这样，问题就出来了---------- cursor: not-allowed 这个属性失效了。

在目标div上再套一层div，将 cursor: not-allowed 加到父盒子上，目标div保留 pointer-events: none

使用 div 和 CSS 的好处包括:

可维护性:

1.使用 div 和 CSS 可以使页面结构更加清晰，代码更易于维护。

2.可重用性: CSS 可以被多个页面重用，减少了代码冗余。

3.易于修改: 使用 CSS 可以轻松地更改页面的布局和样式。

4.提高加载速度: 使用 CSS 可以减少 HTML 代码的冗余，提高页面加载速度。

5.增强用户体验: 使用 CSS 可以制作出美观、交互性强的页面，提高用户体验。