CSS技巧——跨元素控制

• 当我们希望悬浮 x 元素时，y 元素的样式可以随之改变（x和y没有必然关系），而 x 样式可以不发生变化也可以发生变化
• 使用 var(–x) 可以将属性的值以变量的形式进行传递，达到联合控制的样式的目的
• 以 Hexo 博客样式优化过程中的实例介绍该方法
• 最初悬浮右边的字部分，左边的小黑点不会发生变化
  

.archive-article-date::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -4.0rem;
    margin-top: -.5rem;
    width: 1rem;
    height: 1rem;
    border-radius: 1rem;
    background-color: #999;
    box-shadow: var(--archive-article-date-shadow);
    transition: all 0.5 ease;
}
.archive-article-inner {
    border-radius: 4px;
    padding-left: 5px;
    box-shadow: 0 0 0px 0px #cfe9b0;
    transition: all 0.5s ease;
    --archive-article-date-shadow: 0 0 0 0 #cfe9b0;
}
.archive-article-inner:hover,.archive-article-data:hover::before{
    box-shadow: 0 0 5px 3px #cfe9b0;
    --archive-article-date-shadow: 0 0 5px 5px #cfe9b0;
}

• 我们定义了 --archive-article-date-shadow 变量作为样式 box-shadow 的值，定义在被动发生变化的元素 .archive-article-date，当主控元素 .archive-article-inner 悬浮事件产生时，我们将该变量更改为 0 0 5px 5px #cfe9b0 产生光晕，未悬浮则 0 0 0 0 #cfe9b0 相当于没有光晕
• 结果如下：
  
• 看到悬浮右边时，左边的点产生光晕，成功。