javascript - 如何消除父/子依赖？-6ren

javascript - 如何消除父/子依赖？

转载作者：搜寻专家更新时间：2023-10-31 08:49:44

25

4

我想画一个大圆圈，周围有小圆圈。目前父级是大圆圈，小圆圈是它的子级。当我将鼠标悬停在它上面时，我希望任何圆圈都变成红色，但是如果我将鼠标悬停在任何子圆圈上，父级也会变成红色。

这是我的代码:

var parentdiv = document.getElementById('parentdiv');
var largediv = document.getElementById('large');

var div = 360 / 6;
var radius = 150;

var offsetToChildCenter = 50;

var offsetToParentCenter = parseInt(largediv.offsetWidth / 2); //assumes parent is square
var totalOffset = offsetToParentCenter - offsetToChildCenter;

for (var i = 1; i <= 6; ++i) {
  var childdiv = document.createElement('div');
  childdiv.className = 'small';
  childdiv.style.position = 'absolute';

  var y = Math.sin((div * i) * (Math.PI / 180)) * radius;
  var x = Math.cos((div * i) * (Math.PI / 180)) * radius;

  childdiv.style.top = (y + totalOffset).toString() + "px";
  childdiv.style.left = (x + totalOffset).toString() + "px";

  childdiv.style.width = `${offsetToChildCenter * 2}px`
  childdiv.style.height = `${offsetToChildCenter * 2}px`
  childdiv.innerHTML = "Example Text"

  parentdiv.appendChild(childdiv);
  //largediv.appendChild(childdiv);
}

#large {
  position: relative;
  margin: 150px;
  width: 150px;
  height: 150px;
  border-radius: 150px;
  background-color: white;
  color: red;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  text-align: center;
  display: flex;
}

.small {
  position: absolute;
  border-radius: 150px;
  background-color: white;
  color: red;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  text-align: center;
  display: flex;
}

.small:hover {
  background-color: red;
  color: white;
}

.small:active {
  background-color: red;
  color: white;
  box-shadow: 0px 0px 20px red;
}


/* for centering */

html {
  display: flex;
  height: 100%;
}

body {
  margin: auto
}

<head>
  <title></title>
  <link rel='stylesheet' href='styles.css' />

</head>

<body>
  <div id="parentdiv">
    <div id="large"> Example Center Text</div>
  </div>

  <script src="calc.js"></script>

</body>

我试图通过创建另一个空的父 div 并使大圆成为小圆的同级来解决此问题，但小圆并未以大圆为中心。

我是 html/css/js 的新手，非常感谢任何帮助!

最佳答案

不可能只悬停子元素。但是，您可以使用同级元素创建类似的效果

var parentdiv = document.getElementById('parentdiv');
var largediv = document.getElementById('sibling');

var div = 360 / 6;
var radius = 150;

var offsetToChildCenter = 50;

var offsetToParentCenter = parseInt(largediv.offsetWidth / 2); //assumes parent is square
var totalOffset = offsetToParentCenter - offsetToChildCenter;

for (var i = 1; i <= 6; ++i) {
  var childdiv = document.createElement('div');
  childdiv.className = 'small';
  childdiv.style.position = 'absolute';

  var y = Math.sin((div * i) * (Math.PI / 180)) * radius;
  var x = Math.cos((div * i) * (Math.PI / 180)) * radius;

  childdiv.style.top = (y + totalOffset).toString() + "px";
  childdiv.style.left = (x + totalOffset).toString() + "px";

  childdiv.style.width = `${offsetToChildCenter * 2}px`
  childdiv.style.height = `${offsetToChildCenter * 2}px`
  childdiv.innerHTML = "Example Text"

  //parentdiv.appendChild(childdiv);
  largediv.appendChild(childdiv);
}

#large {
  position: relative;
  margin-left: 150px;
  margin-top: -150px;
  width: 150px;
  height: 150px;
  border-radius: 150px;
  background-color: white;
  color: red;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  text-align: center;
  display: flex;
}

#sibling {
  width: 150px;
  height: 150px;
  position: relative;
  margin-top: 150px;
  margin-left: 150px;
  background-color: none;
  color: red;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  text-align: center;
  display: flex;
}

#large:hover {
  color: blue;
  background: pink;
}

.small {
  position: absolute;
  border-radius: 150px;
  background-color: white;
  color: red;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  text-align: center;
  display: flex;
  z-index: 99;
}

.small:hover {
  background-color: red;
  color: white;
}

.small:active {
  background-color: red;
  color: white;
  box-shadow: 0px 0px 20px red;
}


/* for centering */

html {
  display: flex;
  height: 100%;
}

body {
  margin: auto
}

<head>
  <title></title>
  <link rel='stylesheet' href='styles.css' />

</head>

<body>
  <div id="parentdiv">
    <div id="sibling"></div>
    <div id="large"> Example Center Text</div>

  </div>

  <script src="calc.js"></script>

</body>

关于javascript - 如何消除父/子依赖？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57192704/

25

4

0

文章推荐： html - Facebook 页面嵌入的 iframe 不填充容器宽度

文章推荐： javascript - 为什么 sessionStorage 跨多个选项卡保留？

文章推荐： html - Flutter For Web 应用启动 TypeError 异常

vba - 消除/更改循环以加快代码速度
我编写了一些运行速度很慢的 VBA 代码。我的代码中有一系列不同的循环。我知道循环并不总是处理数据的最有效方式，所以我认为它们是问题所在。我需要有关如何更改或消除循环的想法，以便加快代码的运行时间。
php - 消除？来自表单帖子上的查询字符串
我目前有一个网址:http://testsite.local/search/?q=findme一旦有人查询，我的搜索页面。我使用 mod_rewrite 重写了一些页面，想知道是否可以将其变成一个不错
mysql - 如何排除有重复的行？ (消除)
有人可以帮助我执行一个查询，其中查询的重复元素被删除 Select * from table where APPNAME = 'Ap1' or APPNAME= 'Ap2' 使用 DISTINCT 的
linux - 消除。从查找的结果
我正在尝试在 ubuntu 上使用以下命令在一个文件夹中查找文件并通过 FFmpeg 提供并输出到另一个文件夹。问题是当它处理输出路径和文件名时，它添加了一个 .像这样的路径:/conversions
r - 消除 R 中的重复项
这个问题在这里已经有了答案: How can I remove all duplicates so that NONE are left in a data frame? (3 个答案) 关闭 1
coq:消除 forall 量词
我想证明以下定理: Theorem Frobenius (A: Set) (q: Prop) (p: A -> Prop) : (q \/ forall x : A, p x) -> (foral
php - 消除 Excel 文档的缓存
我有一个 PHP 脚本，它只需要一些数据，将其分隔为制表符分隔格式，将其保存为 .xls 文件，然后为用户提供下载链接。大多数情况下运行良好，但有些人正在获取导出的 .xls 文件的缓存版本。我想
r - 消除 R 中的异常数据点
我有一个看起来有点像这个可重现代码的数据框，我想删除每列的异常值(在我们的例子中，数据点低于或高于平均值 2.5 个标准偏差)而不删除整个主题/行。 Subj mn + sd * 2.5) | (x
c++ - 消除 C++ 中多余的模板参数
我正在尝试编写一个实现 fmap 的演示。在 Haskell 中与 continuation ，我的代码如下所示: #include #include template using Callba
Highcharts 消除 xAxis 开始和第一个值之间的差距
在此 HighCharts例如，如何消除 xaxis 开始位置与 Jan 的刻度位置之间的差距。 http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-s
delphi - 消除 TSpeedButton 的闪烁
重现步骤: 将TPanel添加到新的VCL表单并设置Align = alClient。将 TSpeedButton 添加到面板，并将一些 bmp 图像分配给 Glyph 属性。 (可选，但更清晰:F
javascript - 消除 javascript 数组中的元素
我得到一个 JavaScript 数组，其中包含一定数量(未指定)的各种元素(字符串、数字、 bool 值)。我需要消除字符串和 bool 值。我应该如何处理它？我应该使用typeof吗？最佳答案
excel - 消除(可选)空格后的所有字符的公式
我正在寻找一个公式，可以消除字符串中空格后的空格和无用字符。我的第一 react 是执行以下操作:=LEFT(A1,FIND("",A1)) 它适用于所有有空格的情况但是如果单元格中没有空格，我的
javascript - 消除 Javascript 中的按键延迟
我有以下问题:我正在尝试编写一个 Javascript 游戏，并且 Angular 色由箭头键控制。问题是，当一个人按住按键时，在触发第一个按键和重复的按键之间存在短暂的延迟。另外，当按下“向右箭
PowerShell ForEach-Object 消除
让我们考虑一个集合的集合，以及需要在管道内对内部集合的每个元素执行的操作。为了简单起见，让它成为一个数组数组，操作简单的打印到屏幕上。为了表达我的问题，让我们还有一个元素不是集合的数组: $Arra
chapel - 消除 Chapel 构建中源文件的歧义
跟进this question关于包含源文件。我包括一个 Chapel 模块，其中包含一个名为 classes.chpl 的文件。，但我当前的项目也有一个 classes.chpl 。正确的消歧模式
assembly - 消除 Intel 语法中寄存器名称中标签的歧义
我想知道如何在英特尔语法中的某些指令中区分标签名称和寄存器名称。例如，call rdx通常意味着间接跳转，但是如果我们在同一个汇编文件中有一个标签rdx怎么办？我相信它可以被解释为直接跳转到 rdx
javascript - 消除 HTML 弹出窗口的延迟
据我了解，Chrome 会异步运行整个程序，这会导致我的扩展程序在单击后大约 2 秒后打开。有没有办法强制扩展程序显示带有“正在加载”消息的 html 页面，然后完成加载 javascript 并用内
sqlite - 消除 sqlite 中的唯一约束错误
我正在将 CSV 加载到 sqlite 数据库，如下所示: sqlite3 /path/to/output.db /dev/null 或者，您可以自己生成 SQL 命令，以便可以使用 INSERT 或
haskell - 消除 cabal 文件中的重复内容
我的 .cabal 文件的许多节中经常有类似的属性。例如 Library x ... ghc-options: -O2 -Wall -fno-warn-missing-s

首页

博学

6Ren·AI

商城

javascript - 如何消除父/子依赖？