| Activity | CSS Class | jsPlumb Member | Description |
|---|
| Mouse Hover | _jsPlumb_hover | hoverClass | Assigned to both Connectors and Endpoints when the mouse is hovering over them |
| Connection Drag | _jsPlumb_dragging | draggingClass | Assigned to a Connection when it is being dragged (either a new Connection or an existing Connection) |
| Element Dragging | _jsPlumb_element_dragging | elementDraggingClass | Assigned to all Connections whose source or target element is currently being dragged, and to their Endpoints. |
| Source Element Dragging | _jsPlumb_source_element_dragging | sourceElementDraggingClass | Assigned to all Connections whose source element is being dragged, and to their Endpoints |
| Target Element Dragging | _jsPlumb_target_element_dragging | targetElementDraggingClass | Assigned to all Connections whose target element is being dragged, and to their Endpoints |
| Anchor Class | ***_jsPlumb_endpoint_anchor_*** | endpointAnchorClassPrefix | Assigned to Endpoints, and their associated elements, that have either a static Anchor with an associated class, or a Dynamic Anchor whose individual locations have an associated CSS class. The `***` suffix in the class name above is the associated class. Note that this class is added to both the artefact that jsPlumb creates and also the element on which the Endpoint resides, so you will normally have to build a selector with more criteria than just this class in order to target things properly. See the documentation regarding Anchors for a discussion of this. |
| Drop Allowed on Endpoint | _jsPlumb_endpoint_drop_allowed | endpointDropAllowedClass | Assigned to an Endpoint when another Endpoint is hovering over it and a drop would be allowed |
| Drop Forbidden on Endpoint | _jsPlumb_endpoint_drop_forbidden | endpointDropForbiddenClass | Assigned to an Endpoint when another Endpoint is hovering over it and a drop would not be allowed |
| Connection Hover | _jsPlumb_source_hover | hoverSourceClass | Assigned to the source element in a Connection when the mouse is hovering over the Connection |
| Connection Hover | _jsPlumb_target_hover | hoverTargetClass | Assigned to the target element in a Connection when the mouse is hovering over the Connection |
| Drag | _jsPlumb_drag_select | dragSelectClass | Assigned to the document body whenever a drag is in progress. It allows you to ensure document selection is disabled - see [here](home#dragSelection) |
**Note** the last two classes work in conjunction with the `checkDropAllowed` interceptor that you can register on
jsPlumb. For more information about interceptors, see [here](interceptors), but in a nutshell you just provide a
function that takes the two Endpoints and a Connection as argument, and returns whether not a drop would be allowed:
```javascript
jsPlumb.bind("checkDropAllowed", function(params) {
// Here you have access to:
// params.sourceEndpoint
// params.targetEndpoint
// params.connection
return true; // or false. in this case we say drop is allowed.
});
```
### Preventing selection while dragging
jsPlumb puts a class on the body that you can use to disable the default browser behaviour of selecting DOM elements
when dragging:
```css
_jsPlumb_drag_select
```
A suitable value for this (from the jsPlumb demos) is:
```css
._jsPlumb_drag_select {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
```
### Custom CSS Classes
In addition to the default CSS classes, each of the main methods you use to configure Endpoints or make Connections in
jsPlumb support the following two parameters:
- **cssClass** - class(es) to set on the display elements
- **hoverClass** - class(es) to set on the display elements when in hover mode
In addition, `addEndpoint` and `makeSource` allow you to specify what these classes will be for any Connections that
are dragged from them:
- **connectorClass** - class(es) to set on the display elements of Connections
- **connectorHoverClass** - class(es) to set on the display elements of Connections when in hover mode
These parameters should be supplied as a String; they will be appended as-is to the class member, so feel free to
include multiple classes. jsPlumb won't even know.
### CSS for SVG elements
#### Connections
SVG connections in jsPlumb consist of a parent `svg` element, inside of which there are one or more `path` elements,
depending on whether or not you have specified an `outlineStyle`. To target the path element for some connection, you
need a rule like this:
```css
svg path {
stroke:red;
}
```
Hooking this up to the custom class mechanism, you might do something like this:
```javascript
jsPlumb.connect({
source:"someElement",
target:"someOtherElement",
cssClass:"redLine"
});
```
CSS:
```css
svg.redLine path {
stroke:red;
stroke-width:3;
}
```
You might be thinking to yourself, why have the `svg` and `path` elements in this? In fact they are perhaps not
required: they're just there to call out the fact that this is a style on an SVG connector.
#### Endpoints
SVG Endpoints created by jsPlumb consist of a `div`, inside of which is an `svg` parent element, inside of which there
is some shape, the tag name of which depends on the type of Endpoint: