title: how to disable mouse hover when hovering specific jsplumb connection
body: <p>I use JSPlumb Community Edition to dynamically build flowcharts from database.</p>
  <p>In these flowcharts, some connectors should not be clickable.</p>
  <p>I have been able to change the color of such connectors by registering two different connectors types, so users have a hint whether the connection is clickable or not.</p>
  <pre><code>            // define connection types
              const updatableHoverCSS = {
                  strokeWidth: 3,
                  stroke: '#876C4E',
                  outlineWidth: 5,
                  outlineStroke: 'white'
              };
              this.graphInstance.registerConnectionTypes({
                  updatablePrerequisite: {
                      paintStyle: {
                          strokeWidth: 2,
                          stroke: '#FF9201',
                          outlineStroke: 'white'
                      },
                      hoverPaintStyle: updatableHoverCSS
                  },
                  notUpdatablePrerequisite: {
                      paintStyle: {
                          strokeWidth: 2,
                          stroke: '#8E1E07',
                          outlineStroke: 'white'
                      }
                  }
              });
  </code></pre>
  <p>But I can't find out how to disable mouve hover effect, i.e. mouse changing from default to pointer, for connectors with type named 'notUpdatablePrerequisite&quot;.</p>
  <p>About the issue on clickable dashed lines, here is my code on ngInit:</p>
  <pre><code>        this.graphInstance = newInstance({
              // default drag options
              dragOptions: {
                  cursor: 'pointer',
                  zIndex: 2000,
                  grid: [20, 20],
                  containment: 'notNegative'
              },
              // overlays to decorate each connection with
              connectionOverlays: [
                  {
                      type: 'Arrow',
                      options: {
                          location: 1,
                          visible: true,
                          width: 11,
                          length: 11,
                          id: 'ARROW'
                      }
                  }
              ],
              container: document.getElementById('canvas')
          });
          // paint style for the connections hover style.
          const endpointHoverCSS = {
              fill: '#876C4E',
              stroke: '#876C4E'
          };
          // definition of source endpoints
          this.sourceEndpoint = {
              endpoint: DotEndpoint.type,
              paintStyle: {
                  stroke: '#FF9201',
                  fill: 'transparent',
                  radius: 7,
                  strokeWidth: 1
              },
              isSource: true,
              connector: { type: 'Flowchart', options: { stub: [40, 60], gap: 8, cornerRadius: 5, alwaysRespectStubs: false } },
              hoverPaintStyle: endpointHoverCSS,
              maxConnections: -1,
              dragOptions: {}
          };
          // definition of target endpoints (will appear when the user drags a connection)
          this.targetEndpoint = {
              endpoint: DotEndpoint.type,
              paintStyle: { fill: '#FF9201', radius: 7 },
              hoverPaintStyle: endpointHoverCSS,
              maxConnections: -1,
              dropOptions: { hoverClass: 'hover', activeClass: 'active' },
              isTarget: true
          };
  </code></pre>
  <p>And here is the code performed when the div containing the graph instance is updated:</p>
  <pre><code>                // define and style Connection Types
                  const updatableOpenHoverCSS = {
                      stroke: '#FF9201'
                  };
                  const updatableLockedHoverCSS = {
                      stroke: '#FF9201',
                      dashstyle: '2 2'
                  };
                  const notUpdatableHoverCSS = {
                      stroke: '#FF9201',
                  };
                  this.graphInstance.registerConnectionTypes({
                      updatableOpenPrerequisite: {
                          paintStyle: {
                              strokeWidth: 2,
                              stroke: 'green'
                          },
                          hoverPaintStyle: updatableOpenHoverCSS
                      },
                      updatableLockedPrerequisite: {
                          paintStyle: {
                              strokeWidth: 2,
                              stroke: 'red',
                              dashstyle: '2 2'
                          },
                          hoverPaintStyle: updatableLockedHoverCSS
                      },
                      notUpdatableOpenPrerequisite: {
                          paintStyle: {
                              strokeWidth: 2,
                              stroke: '#8E1E07'
                          },
                          hoverPaintStyle: notUpdatableHoverCSS
                      },
                      notUpdatableLockedPrerequisite: {
                          paintStyle: {
                              strokeWidth: 2,
                              stroke: '#8E1E07',
                              dashstyle: '2 2'
                          },
                          hoverPaintStyle: notUpdatableHoverCSS
                      }
  </code></pre>
  <p>Also, I did not see dashed connectors on the demo you mention.</p>
  <p>Here is a screen copy of the graph my code draws, where connection are dashed or not based on a boolean value retrieved from database.</p>
  <p><a href="https://i.stack.imgur.com/4Yp5P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Yp5P.png" alt="enter image description here" /></a></p>
  <p>On the first connector which is dashed, the mouve hover effect only appears on dashes, not between them.</p>