Javascript 2个div，1个隐藏，悬停在上方时触发另一个div

我想要一个div，它本身有两个div，并且底部div是隐藏的，直到你将鼠标悬停在上面

<div class="div_wrapper">

   <div class="div_one">Image</div>

   <div class="div_two">description</div>

</div>

形象
描述

---

描述将隐藏，直到您将鼠标悬停在图像上，然后显示在图像下方，当您将鼠标悬停在图像或描述上时，描述将返回隐藏状态。

如果使用jQuery，则可以使用以下代码：

var div_two = $('.div_two');
$('.div_one').mouseenter(function() {
    div_two.show();
}).mouseleave(function() {
    div_two.hide();
});

它应该有css

.div_two { display: none; }

或者，如果将第二个div放入第一个div中，则可以使用css显示和隐藏它们

<div class="div_wrapper">
   <div class="div_one">Image
       <div class="div_two">description</div>
   </div>
</div>

---

如果使用jQuery，则可以使用以下代码：

var div_two = $('.div_two');
$('.div_one').mouseenter(function() {
    div_two.show();
}).mouseleave(function() {
    div_two.hide();
});

它应该有css

.div_two { display: none; }

或者，如果将第二个div放入第一个div中，则可以使用css显示和隐藏它们

<div class="div_wrapper">
   <div class="div_one">Image
       <div class="div_two">description</div>
   </div>
</div>

---

您可以使用CSS实现这一点：

.div_two { display: none; }
.div_one:hover + .div_two { display: block; }

---

您可以使用CSS实现这一点：

.div_two { display: none; }
.div_one:hover + .div_two { display: block; }

---

您可以使用

可见性：hidden

和

visible

你想要什么

.div_two {
  visibility: hidden;
}
.div_one:hover + .div_two {
  visibility: visible;
}

---

您可以使用

可见性：hidden

和

visible

你想要什么

.div_two {
  visibility: hidden;
}
.div_one:hover + .div_two {
  visibility: visible;
}

---

听起来可行，你累了什么？请发布你的代码。将会有很多，每个都使用相同的类。。。我想确保当其中一个打开时，其他人会呆在原地。这是一个例子，说明完成的项目将要做什么听起来是可行的，你累了吗？请发布你的代码。将会有很多，每个都使用相同的类。。。我想确保当其中一个打开时，其他人会呆在原地。这是一个已完成项目必须完成的示例