View source for Template:Row hover highlight/doc

{{Documentation subpage}}{{tsh|mw-datatable}}
{{uses TemplateStyles|Template:Row hover highlight/styles.css}}
This template enables {{background color|#eaf3ff|row hover highlighting}} via wikitable class modifiers {{type|mw-datatable}} and {{type|hover-highlight}}. 

In addition to adding row highlights, {{type|mw-datatable}} also changes the background of the cells to white. To only add a highlight, use {{type|hover-highlight}}.
== Usage. <nowiki>{{row hover highlight}}</nowiki> ==
Basic usage:
<div style="display:inline-grid; border: 2px solid lime; padding: 0.5em; background-color:white; ">
'''Wikitext'''
<syntaxhighlight lang="wikitext" highlight="1-2">
{{row hover highlight}}
{| class=mw-datatable
|-
! 1 !! 2 !! 3
|-
| 1-1 || 2-1 || 3-1
|-
| 1-2 || 2-2 || 3-2
|}
</syntaxhighlight></div>

<div style="display:inline-grid; border: 2px solid lime; padding: 0.5em; background-color:white; ">
'''Rendered result'''
{{row hover highlight}}
{| class=mw-datatable
|-
! 1
! 2
! 3
|-
| 1-1 || 2-1 || 3-1
|-
| 1-2 || 2-2 || 3-2
|}
</div>

<code>class=mw-datatable</code> can be used in combination with <code>class=wikitable</code>, in which case the non-header cells will have a white background.

<div style="display:inline-grid; border: 2px solid lime; padding: 0.5em; background-color:white; ">
'''Wikitext'''
<syntaxhighlight lang="wikitext" highlight="1-2">
{{row hover highlight}}
{| class="wikitable mw-datatable"
|-
! 1 !! 2 !! 3
|-
| 1-1 || 2-1 || 3-1
|-
| 1-2 || 2-2 || 3-2
|}
</syntaxhighlight></div>

<div style="display:inline-grid; border: 2px solid lime; padding: 0.5em; background-color:white; ">
'''Rendered result'''
{{row hover highlight}}
{| class="wikitable mw-datatable"
|-
! 1
! 2
! 3
|-
| 1-1 || 2-1 || 3-1
|-
| 1-2 || 2-2 || 3-2
|}
</div>

To keep the light gray background from <code>class=wikitable</code>, use <code>class=hover-highlight</code>:

<div style="display:inline-grid; border: 2px solid lime; padding: 0.5em; background-color:white; ">
'''Wikitext'''
<syntaxhighlight lang="wikitext" highlight="1-2">
{{row hover highlight}}
{| class="wikitable hover-highlight"
|-
! 1 !! 2 !! 3
|-
| 1-1 || 2-1 || 3-1
|-
| 1-2 || 2-2 || 3-2
|}
</syntaxhighlight></div>

<div style="display:inline-grid; border: 2px solid lime; padding: 0.5em; background-color:white; ">
'''Rendered result'''
{{row hover highlight}}
{| class="wikitable hover-highlight"
|-
! 1 !! 2 !! 3
|-
| 1-1 || 2-1 || 3-1
|-
| 1-2 || 2-2 || 3-2 
|}
</div>

== Usage. <nowiki>{{mw-datatable}}</nowiki> ==

If you want a white background for data cells, then this may be easier to remember since the template and class name are the same.

<div style="display:inline-grid; border: 2px solid lime; padding: 0.5em; background-color:white; ">
'''Wikitext'''
<syntaxhighlight lang=wikitext highlight="1-2">
{{mw-datatable}}
{| class="wikitable mw-datatable"
|-
! 1 !! 2 !! 3
|-
| 1-1 || 2-1 || 3-1
|-
| 1-2 || 2-2 || 3-2
|}
</syntaxhighlight></div>

<div style="display:inline-grid; border: 2px solid lime; padding: 0.5em; background-color:white; ">
'''Rendered result'''
{{mw-datatable}}
{| class="wikitable mw-datatable"
|-
! 1
! 2
! 3
|-
| 1-1 || 2-1 || 3-1
|-
| 1-2 || 2-2 || 3-2
|}
</div>

==See also==
*{{section link|Help:Table/Advanced|Highlight rows on hover}}

<includeonly>{{Sandbox other||
<!-- Categories below this line -->

[[Category:Templates using TemplateStyles to style external elements]]
}}</includeonly>