# $.highlight

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

Example:

```html
<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. Use `data-mode="hover"` to higlight on hover (default)
- `data-classes=` space-separated class names to toggle on target elements

Highlight containers support these attributes:

- `data-selector=` defines the triggers, i.e. which nodes $.highlight applies to. Default: `[data-toggle="highlight"]`
- `data-mode` is the same as specifying data-mode on every trigger. Default: `hover`
- `data-attr` is the attribute that defines classes to toggle. Default: `data-classes`
- `data-classes=` is the same as specifiying the data-classes on every trigger. Default: `active`


## $.highlight events

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