用CSS实现JS的交互效果

「爱情、让人受尽委屈。」 2022-09-24 05:18 168阅读 0赞

昨天在做页面的时候遇到一个简单的效果，不多说，上交互图  
![交互图][20160726101529199]  
鼠标滑过的导航高度会变化，同时如果滑过的不是被选中的（红色）导航，则被选中的高度会降低，大概就是要实现这样一个效果，当时觉得这样一个交互效果用JQ的hover实现很简单，想当然的就用了JQ，设置一个叫”hover”的class代码如下：

结果同事看了后，就说这样的效果，点击事件和跨元素的hover事件用CSS都可以分别实现，而且兼容性还不错，当然混合起来的交互效果如果要兼容性较好的话，还是要配合JQ来实现，并给出了他的CSS实现点击/hover事件。

## 点击事件： ##

<ul>
        <li class="box1"><input type="radio" id="radio-1" name="box" checked="checked"/><label for="radio-1"></label></li>
        <li class="box2"><input type="radio" id="radio-2" name="box"/><label for="radio-2"></label></li>
        <li class="box3"><input type="radio" id="radio-3" name="box"/><label for="radio-3"></label></li>
    </ul>
    
    //下面是CSS
    
    li {
        float: left;
        list-style: none;
    }
    label {
        display: inline-block;
        width: 100px;
        height: 30px;
        background-color: #ccc;
        border: 1px solid #fff;
    }
    input[type=radio] {
        display: none;
    }
    input[type=radio]:checked ~ label {
        height: 50px;
        background-color: red;
    }
    label:hover {
        background: yellowgreen;
    }

## 跨元素的hover事件 ##

<ul>
        <li class="box3"></li>
        <li class="box2"></li>
        <li class="box1"></li>
    </ul>
    
    //下面是CSS
    
    ul {
        overflow: hidden;
    }
    li {
        float: right;
        height: 30px;
        width: 100px;
        background-color: #ccc;
        list-style: none;
        border: 1px solid #fff;
    }
    .box1 {
        background-color: yellowgreen;
        height: 50px;
    }
    .box1:hover, .box2:hover, .box3:hover {
        background: yellowgreen;
        height: 50px;
    }
    .box2:hover ~ .box1, .box3:hover ~ .box1 {
        background: #ccc;
        height: 30px;
    }

还是自己对CSS的理解不够。没想过click事件可以用input标签并结合这么令人拍案叫绝的方法来实现。此外hover伪选择器平时也只是用来改变产生hover 事件的当前元素的样式，没有尝试过用某个元素的hover选择器来改变其他元素的样式。  
学习了！

[20160726101529199]: /images/20220719/650e243e07284520b06ff4b075a1ada0.png