2
私はHTMLとスタイリングの経験はほとんどありません。私は、jsplumbを使って対話型のサーバーアプリケーションダイアグラムを作成しています。いくつかのアプリケーションがあり、それらは同じ/異なるサーバーに接続されます。サーバー同士を接続することもできます。 私がしたいのは、アプリケーションdivにホバリングしたときに、アプリケーションに接続されているすべてのサーバーを（直接的および間接的に）強調表示することです。 これは次のようなものです 
ホバー上の非子divをハイライト
同じサーバーを複数のアプリケーションに接続できるため、これを行うにはCSSを使用できません。
私はいくつかのjavascriptとjquery（終了HTMLタグの前）を使ってみましたが、動作させることができませんでした。私はこれに新しいので、私はこれに関する提案を感謝します。
.demo {
/* for IE10+ touch devices */
touch-action:none;
}
.flowchart-demo .window {
border: 1px solid green;
box-shadow: 2px 2px 19px #aaa;
-o-box-shadow: 2px 2px 19px #aaa;
-webkit-box-shadow: 2px 2px 19px #aaa;
-moz-box-shadow: 2px 2px 19px #aaa;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
opacity: 0.8;
width: 80px;
height: 80px;
line-height: 80px;
cursor: pointer;
text-align: center;
z-index: 20;
position: absolute;
background-color: #eeeeef;
color: black;
font-family: helvetica, sans-serif;
padding: 0.5em;
font-size: 0.9em;
-webkit-transition: -webkit-box-shadow 0.15s ease-in;
-moz-transition: -moz-box-shadow 0.15s ease-in;
-o-transition: -o-box-shadow 0.15s ease-in;
transition: box-shadow 0.15s ease-in;
}
.application {
border: 2px solid brown;
box-shadow: 2px 2px 19px #aaa;
-o-box-shadow: 2px 2px 19px #aaa;
-webkit-box-shadow: 2px 2px 19px #aaa;
-moz-box-shadow: 2px 2px 19px #aaa;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
opacity: 0.8;
width: 120px;
height: 120px;
line-height: 80px;
cursor: pointer;
text-align: center;
z-index: 20;
position: absolute;
background-color: #eeeeef;
color: black;
font-family: helvetica, sans-serif;
padding: 0.5em;
font-size: 0.9em;
-webkit-transition: -webkit-box-shadow 0.15s ease-in;
-moz-transition: -moz-box-shadow 0.15s ease-in;
-o-transition: -o-box-shadow 0.15s ease-in;
transition: box-shadow 0.15s ease-in;
}
.flowchart-demo .window:hover {
box-shadow: 2px 2px 19px #444;
-o-box-shadow: 2px 2px 19px #444;
-webkit-box-shadow: 2px 2px 19px #444;
-moz-box-shadow: 2px 2px 19px #444;
opacity: 0.6;
}
.flowchart-demo .active {
border: 1px dotted green;
}
.flowchart-demo .hover {
border: 1px dotted red;
}
#flowchartWindow1 {
top: 34em;
left: 5em;
}
#pfc {
top: 2em;
left: 2em;
}
#anser {
top: 2em;
right: 22em;
}
#flowchartWindow2 {
top: 11em;
left: 36em;
}
#flowchartWindow3 {
top: 37em;
left: 48em;
}
#flowchartWindow4 {
top: 23em;
left: 22em;
}
#flowchartWindow5 {
top: 30em;
right: 16em;
}
#flowchartWindow6 {
top: 37em;
right: 40em;
}
#flowchartWindow7 {
top: 32em;
right: 1em;
}
.flowchart-demo .jtk-connector {
z-index: 4;
}
.flowchart-demo .jtk-endpoint, .endpointTargetLabel, .endpointSourceLabel {
z-index: 21;
cursor: pointer;
}
.flowchart-demo .aLabel {
background-color: white;
padding: 0.4em;
font: 12px sans-serif;
color: #444;
z-index: 21;
border: 1px dotted gray;
opacity: 0.8;
cursor: pointer;
}
.flowchart-demo .aLabel.jtk-hover {
background-color: #5C96BC;
color: white;
border: 1px solid white;
}
.window.jtk-connected {
border: 1px solid green;
}
.jtk-drag {
outline: 4px solid pink !important;
}
path, .jtk-endpoint {
cursor: pointer;
}
.jtk-overlay {
background-color:transparent;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
<title>jsPlumb 2.3.0 demo - flowchart</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<link rel="stylesheet" href="../../css/main.css">
<link rel="stylesheet" href="../../css/jsplumbtoolkit-defaults.css">
<link rel="stylesheet" href="../../css/jsplumbtoolkit-demo.css">
\t \t <link rel="stylesheet" href="flow.css">
</head>
<body data-demo-id="flowchart">
<div class="jtk-demo-canvas canvas-wide flowchart-demo jtk-surface jtk-surface-nopan" id="canvas">
<div class="window jtk-node" id="flowchartWindow1"><strong>Server1</strong><br/><br/></div>
<div class="window jtk-node" id="flowchartWindow2"><strong>Server2</strong><br/><br/></div>
<div class="window jtk-node" id="flowchartWindow3"><strong>Server3</strong><br/><br/></div>
<div class="window jtk-node" id="flowchartWindow4"><strong>Server4</strong><br/><br/></div>
<div class="window jtk-node" id="flowchartWindow5"><strong>Server5</strong><br/><br/></div>
<div class="window jtk-node" id="flowchartWindow6"><strong>Server6</strong><br/><br/></div>
<div class="window jtk-node" id="flowchartWindow7"><strong>Server7</strong><br/><br/></div>
<div class="application" id="app1"><strong>App1</strong><br/><br/></div>
<div class="application" id="app2"><strong>App2</strong><br/><br/></div>
</div> \t \t
</body>
<script>
var elm = document.getElementById("flowchartWindow6");
function changeColor(color) {
elm.style.backgroundColor = color;
}
var elms = document.getElementById("app2");
elms.onmouseover = function() {
changeColor("yellow");
};
}
</script>
<script>
$(document).ready(function(){
$('#app2').hover(
function() {
$('#flowchartWindow7').hide()
},
);
})
</script>
\t \t <script src="https://jsplumbtoolkit.com/lib/jsplumb.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
\t \t <script src="flow.js"></script>
</html>