Visibility Switcher Extension
Use this extension in a parent element to easily define the visibility of child elements during the mouse hover of their containers. When the "mouseleave" event is triggered the children will be hidden.
Options
Rows | data-visibility_switcher-rows | String | Required
Provide a jQuery selector string which points to the elements that have the "hover" event.
Selections | data-visibility_switcher-selections | String | Required
Provide a jQuery selector string which points to the elements to be displayed upon the "hover" event.
Example
In the following example the .row-action elements will be visible whenever the user hovers above of the
<tr> element. The initial state of the elements must be hidden (thus the 'hidden' class).
<table data-gx-extension="visibility_switcher"
data-visibility_switcher-rows="tr.row"
data-visibility_switcher-selections="i.row-action">
<tr class="row">
<td>#1</td>
<td>John Doe</td>
<td>
<i class="fa fa-pencil row-action edit hidden"></i>
<i class="fa fa-trash row-action delete hidden"></i>
</td>
</tr>
</table>
Whenever the user hovers at the table rows the .row-action elements will be visible and whenever the mouse leaves the rows they will be hidden.