用CSS实现JS的交互效果

昨天在做页面的时候遇到一个简单的效果，不多说，上交互图

鼠标滑过的导航高度会变化，同时如果滑过的不是被选中的（红色）导航，则被选中的高度会降低，大概就是要实现这样一个效果，当时觉得这样一个交互效果用JQ的hover实现很简单，想当然的就用了JQ，设置一个叫”hover”的class代码如下：

var $s2Ul=$("#midsection2_nav");
    var $s2Li=$("#midsection2_nav>li");
    $s2Li.hover(function() {
        $this=$(this);
        if($this.hasClass('active')==false){ 
            $this.css({
                "margin-top":"0px",
                "height":"81px",
            });
            $s2Ul.children('.active').css({
                "margin-top":"8px",
                "height":"73px",
            });
        }  
    }, function() {
        $this.css({
                "margin-top":"8px",
                "height":"73px",
        });
        $s2Ul.children('.active').css({
                "margin-top":"0px",
                "height":"81px",
        });
    });

    $s2Li.click(function() {
        $this=$(this);
        $s2Li.removeClass('active');
        $s2Li.css({
            "margin-top":"8px",
            "height":"73px",
        })
         $this.css({
            "margin-top":"0px",
            "height":"81px",
         })
        $this.addClass('active');
    });
})
           

结果同事看了后，就说这样的效果，点击事件和跨元素的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: px;
    height: px;
    background-color: #ccc;
    border: px solid #fff;
}
input[type=radio] {
    display: none;
}
input[type=radio]:checked ~ label {
    height: px;
    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: px;
    width: px;
    background-color: #ccc;
    list-style: none;
    border: px solid #fff;
}
.box1 {
    background-color: yellowgreen;
    height: px;
}
.box1:hover, .box2:hover, .box3:hover {
    background: yellowgreen;
    height: px;
}
.box2:hover ~ .box1, .box3:hover ~ .box1 {
    background: #ccc;
    height: px;
}
           

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

学习了！