In reference to the first part of the problem:
The developer behind jsplumb recommended the usage of:
connectorHoverStyle: { strokeStyle:"red" }
Regarding the second part:
This snippet showcases the initial HTML code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"> </script>
<script src="http://stage-preview.gage.com/Creative/Microsoft/EZCourseDemo/scripts/jquery.jsPlumb-1.3.16-all-min.js"> </script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
.........
</body>
</html>
Upon removing
<!DOCTYPE html>
the endpoint positions returned to normal. It's unclear if this issue lies within jsbin or jsplumb, but it is advised to exclude that tag from the HTML when working with jsbin.
The difference in endpoint placement before and after removing the tag can be seen in the following image. Notice how the TopCenter endpoint on Target2 has shifted slightly.