Question

只用css可不可以hover一个元素的时候改变另一个元素的位置？求写法 在线等

只用css可不可以hover一个元素的时候改变另一个元素的位置？求写法 在线等

Answer 1

可以是可以，就是你在写html结构的时候，一定要把另一个元素写在你hover的元素里面，即要求hover的元素是父元素，移动的元素是子元素，然后写css的时候可以 div.hover a {...;}

Answer 2

经我研究，发现css 的hover事件只能是父元素hover，子元素改变样式，其他元素都不行，只能用js控制

<style>
    .fu{
        width: 200px;
        height: 200px;
        background-color: #f00;
    }
    .zi{
        width: 100px;
        height: 100px;
        background-color: #0f0;
    }
    .sibling{
        width: 100px;
        height: 100px;
        background-color: #00f;
    }
    /*无效，若要实现此效果，请用js*/
    /*.fu:hover .sibling{
        /*background-color: #FF7E00;
    }*/
    /*有效*/
    /*.fu:hover .zi{
        background-color: #FF7E00;
    }*/
</style>
<div class="fu">
    <div class="zi"></div>
</div>
<div class="sibling"></div>
<script>
    //需要加载jquery
    $(function(){
        $(".fu").hover(function(){
            $(".sibling").css({"backgroundColor":"#FF7E00"});
        },function(){
            $(".sibling").css({"backgroundColor":"#00F"});
        });
    })
</script>

Answer 3

这个要JS 了，自身的状态改变可以 纯CSS3