Fix #1236

docs/css/bulma-docs.css

@@ -2591,6 +2591,26 @@ a.box:active {
   cursor: not-allowed;
 }
 
+.input::-moz-placeholder,
+.textarea::-moz-placeholder {
+  color: rgba(54, 54, 54, 0.3);
+}
+
+.input::-webkit-input-placeholder,
+.textarea::-webkit-input-placeholder {
+  color: rgba(54, 54, 54, 0.3);
+}
+
+.input:-moz-placeholder,
+.textarea:-moz-placeholder {
+  color: rgba(54, 54, 54, 0.3);
+}
+
+.input:-ms-input-placeholder,
+.textarea:-ms-input-placeholder {
+  color: rgba(54, 54, 54, 0.3);
+}
+
 .input:hover, .input.is-hovered,
 .textarea:hover,
 .textarea.is-hovered {
@@ -2931,6 +2951,22 @@ a.box:active {
   cursor: not-allowed;
 }
 
+.select select::-moz-placeholder {
+  color: rgba(54, 54, 54, 0.3);
+}
+
+.select select::-webkit-input-placeholder {
+  color: rgba(54, 54, 54, 0.3);
+}
+
+.select select:-moz-placeholder {
+  color: rgba(54, 54, 54, 0.3);
+}
+
+.select select:-ms-input-placeholder {
+  color: rgba(54, 54, 54, 0.3);
+}
+
 .select select:hover, .select select.is-hovered {
   border-color: #b5b5b5;
 }
@@ -4427,10 +4463,6 @@ a.box:active {
   text-align: left;
 }
 
-.table tr:hover {
-  background-color: #fafafa;
-}
-
 .table tr.is-selected {
   background-color: #00d1b2;
   color: #fff;
@@ -4478,6 +4510,14 @@ a.box:active {
   width: 100%;
 }
 
+.table.is-hoverable tbody tr:hover {
+  background-color: #fafafa;
+}
+
+.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover {
+  background-color: whitesmoke;
+}
+
 .table.is-narrow td,
 .table.is-narrow th {
   padding: 0.25em 0.5em;
@@ -4487,10 +4527,6 @@ a.box:active {
   background-color: #fafafa;
 }
 
-.table.is-striped tbody tr:not(.is-selected):nth-child(even):hover {
-  background-color: whitesmoke;
-}
-
 .tags {
   -webkit-box-align: center;
       -ms-flex-align: center;

docs/documentation/elements/table.html

@@ -506,6 +506,47 @@ variables:
       </div>
     </div>
 
+    <div class="columns">
+      <div class="column">
+        <p>You can add a <strong>hover effect</strong> on each row</p>
+      </div>
+      <div class="column">
+        <code>table is-hoverable</code>
+      </div>
+      <div class="column is-half">
+        <table class="table is-hoverable">
+          <thead>
+            <tr>
+              <th>One</th>
+              <th>Two</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Three</td>
+              <td>Four</td>
+            </tr>
+            <tr>
+              <td>Five</td>
+              <td>Six</td>
+            </tr>
+            <tr>
+              <td>Seven</td>
+              <td>Eight</td>
+            </tr>
+            <tr>
+              <td>Nine</td>
+              <td>Ten</td>
+            </tr>
+            <tr>
+              <td>Eleven</td>
+              <td>Twelve</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
     <div class="columns">
       <div class="column">
         <p>You can have a <strong>fullwidth</strong> table.</p>
@@ -555,7 +596,7 @@ variables:
         <code>table is-bordered is-striped is-narrow is-fullwidth</code>
       </div>
       <div class="column is-half">
-        <table class="table is-bordered is-striped is-narrow is-fullwidth">
+        <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
           <thead>
             <tr>
               <th>One</th>