Question

图片是父div，子div位于较小的图片的一部分（父级）。孩子是我要悬停的div 并让工具提示下拉，但是当我将鼠标悬停时，工具提示也会下拉图像（父级）。我不是真的使用HTML和CSS，所以请原谅任何新手失误。我在工具提示中找到了大部分代码各种网站。我的头太远了！

我已经从网上下载了摘要。试图把在一起，但经验不足。

foo <- function(n, s = NULL, t = NULL, f = NULL){

d1 <- if(!is.null(t)) t + n else NULL
d2 <- if(!is.null(f)) f^2 + n else NULL

m <- if(!is.null(s)) s/2 + n else NULL
r <- if(!is.null(m)) m + 1 else NULL

d3 <- if(!is.null(m)) m + r else NULL

data.frame(d = c(d1, d2, d3))
}

 # Example of use:
 foo(n = 30:35, s = 1:2, t = 3:5, f = 7)

Answer 1

首先，最好的做法是删除内联样式并将其添加到CSS中。然后，我建议使用相对单位而不是像素单位（20％与100px），以便您的网站能够响应。

要回答您的问题，这是罪魁祸首：

.tooltip:hover .tooltiptext {
  visibility: visible;
}

现在，当您将鼠标悬停在.tooltip（它是父级）上时，它会激活。将鼠标悬停在.tooltiptext上时要激活它。这样的代码变为：

.tooltip .tooltiptext:hover {
  visibility: visible;
}

Answer 2

您应该考虑开始习惯使用正确的标识来组织代码，以免迷失自己的代码。

看看那是您想要的：

document.getElementById("sibling").addEventListener("mouseover", function(){
  document.getElementById("child").style.visibility = "visible";
});
document.getElementById("sibling").addEventListener("mouseout", function(){
  document.getElementById("child").style.visibility = "hidden";
});

* {
  margin: 0;
  padding: 0;
  text-align: center;
}

.parent {
  position: relative;
  display: inline-block;
  width: 400px;
  height: 250px;
  padding-top: 30px;
  background-color: silver;
}

.sibling {
  background-color: grey;
  width: 50%;
  height: 100px;
  margin: 0 auto;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
}

.child {
  visibility: hidden;
  width: 50%;
  height: 100px;
  background-color: yellow;
  margin: 0 auto;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
}

<div class="parent">
  I'm the parent DIV !
  <div class="sibling" id="sibling">I'm the sibling DIV, hover me !</div>
  <div class="child" id="child">Here it goes an example !</div>
</div>

有父母和孩子的div。希望我的工具提示从子div删除。当我将父div悬停时，它会掉落

2 个答案: