Change styles of pressed buttons on hover

Since we were styling pressed buttons the same way as buttons on hover,
a person hovering on the button and then clicking it wouldn't notice
that the buttons had been pressed unless they noticed that the number
and percentages of votes had changes. They wouldn't notice the changes
when unpressing the buttons either, since, after clicking the button,
the cursor would still be over it, and so the hover styles would apply.

Furthermore, it was hard for mouse users to realize that a button could
be unpressed, since the style of pressed buttons didn't change on hover.

So we're now changing the icons on hover without changing the
background. This way all four states (unpressed, unpressed on hover,
pressed, pressed on hover) are styled in a different way.

app/assets/stylesheets/in_favor_against.scss

@@ -30,10 +30,13 @@
     &:not([disabled]) {
       cursor: pointer;
 
-      &:hover,
-      &:active,
-      &[aria-pressed=true] {
+      &[aria-pressed=false]:hover,
+      &[aria-pressed=false]:active,
+      &[aria-pressed=true]:not(:hover, :active) {
         @include has-fa-icon($icon, solid);
+      }
+
+      &[aria-pressed=true] {
         background: $pressed-color;
         border-color: $pressed-color;
         color: #fff;

app/assets/stylesheets/layout.scss

@@ -1710,9 +1710,12 @@ table {
   @mixin like-unlike-icon($icon, $pressed-color) {
     @include has-fa-icon($icon, regular);
 
-    &:hover,
-    &[aria-pressed=true] {
+    &[aria-pressed=false]:hover,
+    &[aria-pressed=true]:not(:hover) {
       @include has-fa-icon($icon, solid);
+    }
+
+    &[aria-pressed=true] {
       color: $pressed-color;
     }
   }