CSS伪类之hover

马黑黑

CSS的伪类选择器有好些个，今天我们来看看 hover。hover的作用是鼠标滑过交互，主要是帮助原始元素产生一些动态效果，这些效果主要是基于原始元素的属性，如 with、height、left、top、color、background、border、box-shadow、animation等等等等。先看以下效果：一个 400*400 的 div，鼠标指针滑过时变为圆形、背景色变成其他颜色，鼠标指针移出后有回复正常：

以上效果，仅用到CSS的伪类hover，并不是JS的动态效果实现的。完整主元素和其伪类选择器代码如下：

  
									
.papa {
   margin: 50px auto 0;
   width: 400px;
   height: 400px;
   background: #2e2e2e;
}
.papa:hover {
   border-radius: 50%;
   background: olive;
}

注意：伪类的表示法是小角冒号，这与伪元素用双小角冒号不同。

但简单的 hover 交互效果有些生硬，可以在原始元素中加入 transition 属性加以定义。例如上面的 .papa 元素，我们加入：

   transition: all .5s;

这将产生如下的效果：

二楼我还将给出一个通过父盒子的hover属性处理众多子元素变化的例子。

马黑黑

马黑黑

二楼实例的代码：
<style>
#papa { margin:  50px auto 0; padding: 0; width: 400px; height: 400px; position: relative; }
.spans { position: absolute; padding: 0; margin: 0; background: #eee; transition: all .2s; }
#papa:hover .spans { transform: translate(var(--xx),var(--yy)) rotate(var(--dg)); }
</style>

<div id="papa"></div>

<script>
let rows = 10, cols = 10;
let pw = papa.clientWidth, ph = papa.clientHeight;
let sw = pw / cols, sh = ph / rows;

let getNum = (x, y) => Math.floor(Math.random() * (y-x+1)) + x;

for(j=0; j<rows; j++) {
        for(k=0; k<cols; k++) {
                let span = document.createElement('span')
                span.className = 'spans';
                span.style.cssText = `--xx: ${getNum(-50,50)}px; --yy: ${getNum(-50,50)}px; --dg: ${getNum(-45,45)}deg;
                        width: ${sw}px; height: ${sh}px; left: ${k*sw}px; top: ${j*sh}px;
                        text-align: center; line-height: ${sh}px`;
                span.innerText = (k + j * cols) + 1;
                papa.appendChild(span);
        }
}
</script>

马黑黑

二楼实例中，JS部分仅用于绘制 100 个 span 标签，动态交互效果是用CSS完成的

马黑黑

JS代码解释：

for(j=0; j<rows; j++) { //行循环
        for(k=0; k<cols; k++) { //列循环
                let span = document.createElement('span'); //创建待生成的标签
                span.className = 'spans'; // class="spans"
                //写入CSS的style样式：CSS变量赋值、宽度、高度、左边值、上边值、文本对齐、行高等
                span.style.cssText = `--xx: ${getNum(-50,50)}px; --yy: ${getNum(-50,50)}px; --dg: ${getNum(-45,45)}deg;
                        width: ${sw}px; height: ${sh}px; left: ${k*sw}px; top: ${j*sh}px;
                        text-align: center; line-height: ${sh}px`;
                span.innerText = (k + j * cols) + 1;//span的文本：数字序号
                papa.appendChild(span);//span添加到父元素中
        }
}

马黑黑

CSS代码解释：

<style>
#papa { margin:  50px auto 0; padding: 0; width: 400px; height: 400px; position: relative; }
.spans { position: absolute; padding: 0; margin: 0; background: #eee; transition: all .2s; }
#papa:hover .spans { transform: translate(var(--xx),var(--yy)) rotate(var(--dg)); }
</style>


#papa 是二楼实例的父盒子样式，400*400的宽高尺寸，相对定位。

.spans 是 <div id="papa'></div> 里面将要装载的 span 标签集群的各自样式：绝对定位、内外边距为0，背景颜色 #eee，hover类动画相应时长 0.2s（发起和收回均是 0.2s），all表示所有的属性变化都用这个时长。

#papa:hover .spans 是hover动画的关键、核心代码，它表示：伪类 hover 交互由 #papa 父盒子发起，但属性变化的对象是其下的 .spans 子元素，换言之，接收鼠标指针滑入滑出的对象是 #papa，做属性变化动作的是它的类名为 spans 的孩子们（注意这里的 spans  是自定义的CSS类名称而不是 span 标签，如果命名为 piece 或其他，那么 #papa:hover .spans 要写成 #papa:hover .piece 或其他）。

#papa:hover .spans 代码块中，使用了一个 transform 语句来产生动画效果，发起两个动作 translate 和 rotate，前者是移动，后者是旋转；还可以加入其它的属性，看需要。为了差异化变化的动作，使用三个变量，--xx、--yy、--dg，其中，--xx和--yy针对translate（x,y)的参数，de针对rotate(deg)参数，这些参数的取值将在JS中随机给每一个 span 标签设计，JS擅长这个。

加林森

老黑早晨好！

红影

这个好玩。一楼那个我喜欢带时间的那个渐变，看着好神奇啊

红影

二楼的弄个了那么多的碎片，要是都朝一个方向动就太奇怪了，而黑黑设置的随机真棒，让所有小块各方向乱动，无序中的美

红影

试验了一下，发现个问题。 transition: all .5s;这句放在css里时，发起有时间延迟，收回是瞬间的。
只有放到html里，发起和收回才是都有时间延迟的。

马黑黑

红影 发表于 2022-7-7 09:30
试验了一下，发现个问题。 transition: all .5s;这句放在css里时，发起有时间延迟，收回是瞬间的。
只有放 ...

不会这样的，标准的就是放在CSS对应原始元素的代码里的。你在检查一下问题处在哪里

马黑黑

红影 发表于 2022-7-7 09:30
试验了一下，发现个问题。 transition: all .5s;这句放在css里时，发起有时间延迟，收回是瞬间的。
只有放 ...

这里，原始元素指的是要运动的元素，比如，要让 .papa 动，则在 .papa 里加 transition 设定，要让 .span 动，就在 .span 哪里加

马黑黑

马黑黑

红影 发表于 2022-7-7 09:30
试验了一下，发现个问题。 transition: all .5s;这句放在css里时，发起有时间延迟，收回是瞬间的。
只有放 ...

看13#效果，代码如下：

<style>
#mabox {
        margin: 10px auto;
        width: 400px;
        height: 400px;
        background: #ccc linear-gradient(#eee,#667788);
        transition: all 1.5s;
}
#mabox:hover {
        cursor: pointer;
        border-radius: 50%;
        background: #ccc linear-gradient(#eee,#001145);
}
</style>

<div id="mabox"></div>

红影

马黑黑 发表于 2022-7-7 12:24
不会这样的，标准的就是放在CSS对应原始元素的代码里的。你在检查一下问题处在哪里

不知道，我是在本地测试的。用我自己的头像试了试。

樵歌

来瞅一眼天书

红影

马黑黑 发表于 2022-7-7 12:56
看13#效果，代码如下：

嗯嗯，知道了，加点时间延迟真好看

马黑黑

红影 发表于 2022-7-7 20:28
嗯嗯，知道了，加点时间延迟真好看

你要找出你的测试代码问题在哪，这才是关键

马黑黑

樵歌 发表于 2022-7-7 20:28
来瞅一眼天书

马黑黑

红影 发表于 2022-7-7 20:24
不知道，我是在本地测试的。用我自己的头像试了试。

用啥都一样的