Question

我对html和样式的经验很少。我正在使用jsplumb来构建交互式服务器应用程序图。有一些应用程序，它们将连接到相同/不同的服务器。服务器也可以相互连接。我想要做的是在悬停在应用程序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">
		<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>		
            </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>
		<script src="https://jsplumbtoolkit.com/lib/jsplumb.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
		<script src="flow.js"></script>
        
</html>

Answer 1

查看CSS中的兄弟选择器。

https://css-tricks.com/almanac/selectors/g/general-sibling/ https://css-tricks.com/almanac/selectors/a/adjacent-sibling/

所以，如果你有divs

然后CSS会看起来像。

#maindiv:hover ~ #otherdiv{
  color:red;
}

悬停时突出显示非子div

1 个答案: