Hover
configurationDefines the hover configuration.
hover
Object<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
id: "1",
content: "Shape 1",
x: 100,
y: 100
}, {
id: "2",
content: "Shape 2",
x: 300,
y: 100
}],
connections: [{
from: "1",
to: "2"
}],
connectionDefaults: {
fromConnector: {
hover: {
fill: {
color: "red",
opacity: 0.8
},
stroke: {
color: "blue",
width: 2
}
}
}
}
});
</script>hover.fill
String|ObjectDefines the hover fill options of the connector.
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
id: "1",
content: "Shape 1",
x: 100,
y: 100
}, {
id: "2",
content: "Shape 2",
x: 300,
y: 100
}],
connections: [{
from: "1",
to: "2"
}],
connectionDefaults: {
fromConnector: {
hover: {
fill: {
color: "orange",
opacity: 0.7
}
}
}
}
});
</script>hover.stroke
String|ObjectDefines the hover stroke options of the connector.
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
id: "1",
content: "Shape 1",
x: 100,
y: 100
}, {
id: "2",
content: "Shape 2",
x: 300,
y: 100
}],
connections: [{
from: "1",
to: "2"
}],
connectionDefaults: {
fromConnector: {
hover: {
stroke: {
color: "red",
width: 3,
dashType: "dash"
}
}
}
}
});
</script>Related Members
- hover.fill - Defines the hover fill options of the connector.
- hover.stroke - Defines the hover stroke options of the connector.