时间戳

首页 > 解决方案 > 在 div 悬停时，在第三个 div 上显示一个新 div

javascript - 在 div 悬停时，在第三个 div 上显示一个新 div

问题描述

假设我有 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>

标签： javascriptcss

解决方案

更新： 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>

推荐阅读