个人中心
gpt4 book ai didi

javascript - 在悬停时突出显示非子 div

转载 作者：行者123 更新时间：2023-11-28 02:41:43 26 4
gpt4 key购买 nike

我对 html 和样式的经验很少。我正在使用 jsplumb 构建交互式服务器应用程序图。会有一些应用程序，它们会连接到相同/不同的服务器。服务器也可以相互连接。我想要做的是在悬停在应用程序 div 上时突出显示连接到应用程序(直接和间接)的所有服务器。它看起来像这样 enter image description here

我不能使用 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>

最佳答案

查看 CSS 中的兄弟选择器。

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

所以如果你有div

那么 CSS 看起来应该是这样的。

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

关于javascript - 在悬停时突出显示非子 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43924510/

26 4 0
文章推荐： c++ - 将对象存储在 vector 中，编译器说元素不存在
文章推荐： javascript - Highcharts : How to calculate the distance between each bar in Bar chart
文章推荐： javascript - 分离 Spring 和 Dojo 单页应用程序代码库
文章推荐： c++ - XCode 编译器错误，使用 CMake 构建的项目
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com