在 div hover 上，在第三个 div 上显示一个新 div

Question

假设我有 2 个 div，并排放置（它们之间有一些中间元素）：A（左）和 B（右）。 当悬停在 B 上时，我希望另一个 div(C) 出现在左侧 (A) 上。

我知道如何切换显示无/块属性，但我不知道如何编写条件，以便 div C 可以出现在另一个 div 上，而不是我们悬停的那个。

这可以做到吗？

<div className="A">
   <h2>About me</h2>
</div>

<div className="B">
   <div>
       <Link className="link1-to-project" to="/project1">
       <h2>Project 1</h2>
   <div className="C"></div>
</div>

Answer 1

更新： https://jsfiddle.net/mq5bza81/1/

https://jsfiddle.net/mq5bza81/

<!DOCTYPE html>
<html>

  <head>
    <title>Title</title>
  </head>

  <body>
   
    <style>
      .wrapper {
        position: relative;
      }

      .b:hover+.c {
        display: block;
      }

      .c {
        display: none;
        position: absolute;
        top: 0;
      }
    </style>

    <div class="wrapper">
      <div class="a">AAA</div>
      <div class="b">BBB</div>
      <div class="c">CCC</div>
    </div>

  </body>

</html>

Answer 2

代码演示在这里

Html

<div id="a">
 Div A
<div id="c">Div C</div>
</div>
<div id="b">Div B</b>

css

#a, #b{
float:left;
height:100px;
width:100px;
color:#fff;
background-color:#ffcc66;
margin:10px;
text-align:center;
}
#c{
background-color:#000;
margin:10px;
visibility:hidden;
}

Javascript

document.getElementById("b").addEventListener("mouseover", mouseOver);
document.getElementById("b").addEventListener("mouseout", mouseOut);
function mouseOver() {
document.getElementById("c").style.visibility = "visible";
}

function mouseOut() {
document.getElementById("c").style.visibility = "hidden";
}

在 div hover 上，在第三个 div 上显示一个新 div

问题描述

2 个解决方案

解决方案1
1 2020-06-26 10:05:54

解决方案2
1 已采纳 2020-06-26 10:19:51

在 div hover 上，在第三个 div 上显示一个新 div

问题描述

2 个解决方案

解决方案1 1 2020-06-26 10:05:54

解决方案2 1 已采纳 2020-06-26 10:19:51

解决方案1
1 2020-06-26 10:05:54

解决方案2
1 已采纳 2020-06-26 10:19:51