:Hover in previous element

Asked

Viewed 197 times

1

I would like to give :Hover on button "2" mundaning 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 wonder if you have how to make a Hover effect on a previous element

html css hover

  • I can not (for now), but have in the specification of the "level 4 selectors" of css. For now, only using Javascript.

  • Probably you have to use Jquery, apparently by the logic of your problem you could use an NG-class of ANGULARJS, I suggest you a searched in the angular friend, it is of extreme value, and it facilitates MUCH. (instead of having to stay using Jquery) , as far as I know it seems possible for your request by ng-class

  • If there is :hover in "1" which shall have effect? and if :hover in "3" which shall have an effect?

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>
<a class="btn um" href="">01</a>
<a class="btn dois" href="">02</a>
<a class="btn tres" href="">03</a>

Browser other questions tagged html css hover

You are not signed in. Login or sign up in order to post.