$.highlight

$.highlight() highlights elements when hovering on or clicking another element.

Example:

<div data-toggle="highlight" data-target="a.red" data-classes="active">Link</a>
<div data-toggle="highlight" data-target="a.red" data-classes="active" data-mode="click">Link</a>
<script>
  $('body').highlight({
    classes: 'shadow',
    mode: 'click'
  })
</script>

$.highlight attributes

When we run $('body').highlight(), the body is called a “container”. It listens to events on “triggers”, like <... data-toggle="highlight">

Highlight triggers support these attributes:

• data-toggle="highlight" indicates that the element acts as a highlighter
• data-target= selectors to highlight (required)
• data-mode="click" highlights on click. Default: data-mode="hover"
• data-classes= space-separated class names to toggle on target elements. Default: active

Highlight containers support these attributes:

• data-selector= is a selector that picks the triggers for highlight. Default: [data-toggle="highlight"]
• Any other data-* attribute acts as a default data-* attribute for the trigger.

$.highlight events

• highlight is fired on the trigger when activated. Attributes:
  • target: elements that match the data-target= selector