CSS伪类之hover
<style>.papa {
margin: 50px auto 0;
width: 400px;
height: 400px;
background: #2e2e2e;
}
.papa:hover {
border-radius: 50%;
background: olive;
}
</style>
<p>CSS的伪类选择器有好些个，今天我们来看看 hover。hover的作用是鼠标滑过交互，主要是帮助原始元素产生一些动态效果，这些效果主要是基于原始元素的属性，如 with、height、left、top、color、background、border、box-shadow、animation等等等等。先看以下效果：一个 400*400 的 div，鼠标指针滑过时变为圆形、背景色变成其他颜色，鼠标指针移出后有回复正常：</p>
<div class="papa"></div>
<p><br>以上效果，仅用到CSS的伪类hover，并不是JS的动态效果实现的。完整主元素和其伪类选择器代码如下：</p>
<pre>
<span style="color: red;">.papa </span>{
<span style="color: blue;">margin</span>: 50px auto 0;
<span style="color: blue;">width</span>: 400px;
<span style="color: blue;">height</span>: 400px;
<span style="color: blue;">background</span>: #2e2e2e;
}
<span style="color: red;">.<span style="color: blue;">papa</span>:hover </span>{
<span style="color: blue;">border-radius</span>: 50%;
<span style="color: blue;">background</span>: olive;
}
</pre>
<p><br></p><p>注意：伪类的表示法是小角冒号，这与伪元素用双小角冒号不同。</p><p><br></p><p>但简单的 hover 交互效果有些生硬，可以在原始元素中加入 transition 属性加以定义。例如上面的 .papa 元素，我们加入：</p><p><br></p><p> <span style="color: blue;">transition</span>: all .5s;<br></p>
<p><br>这将产生如下的效果：</p>
<div class="papa" style="transition: all .5s"></div>
<p><br>二楼我还将给出一个通过父盒子的hover属性处理众多子元素变化的例子。</p> <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>
二楼实例的代码：
<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擅长这个。
老黑早晨好！{:4_190:} 这个好玩。一楼那个我喜欢带时间的那个渐变，看着好神奇啊{:4_187:} 二楼的弄个了那么多的碎片，要是都朝一个方向动就太奇怪了，而黑黑设置的随机真棒，让所有小块各方向乱动，无序中的美{:4_173:} 试验了一下，发现个问题。 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 哪里加 <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 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对应原始元素的代码里的。你在检查一下问题处在哪里
不知道，我是在本地测试的。用我自己的头像试了试。 来瞅一眼天书{:4_193:} 马黑黑 发表于 2022-7-7 12:56
看13#效果，代码如下：
嗯嗯，知道了，加点时间延迟真好看{:4_187:} 红影 发表于 2022-7-7 20:28
嗯嗯，知道了，加点时间延迟真好看
你要找出你的测试代码问题在哪，这才是关键 樵歌 发表于 2022-7-7 20:28
来瞅一眼天书
{:4_190:} 红影 发表于 2022-7-7 20:24
不知道，我是在本地测试的。用我自己的头像试了试。
用啥都一样的