: hover in previous element

1

I would like to give: hover on the button "2" by changing the effect on button "1"

<div class="btn um">1</div>
<div class="btn dois">2</div>
<div class="btn tres">3</div>

example:

.um:hover ~ .dois {} (isto funciona)
.dois:hover ~ .um {} ( porem isto não funciona)

I would like to know if you have a hover effect on a previous element

    
asked by anonymous 05.07.2016 / 07:32

1 answer

0

Not possible with css only. You can do this easily with jquery see:

            $(".um").hover(
                function() {$(".dois").addClass('hover-btn-02')},
                function() {$(".dois").removeClass('hover-btn-02')}
            );
            $(".dois").hover(
                function() {$(".um").addClass('hover-btn-01')},
                function() {$(".um").removeClass('hover-btn-01')}
            );
a{display: table;padding: 20px;margin:5px;background-color: red;}
.hover-btn-01{background-color: green;}
.hover-btn-02{background-color: green;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><aclass="btn um" href="">01</a>
<a class="btn dois" href="">02</a>
<a class="btn tres" href="">03</a>
    
05.07.2016 / 15:29