设置class为hover的div，使鼠标悬浮于上时显示class为hover2的表格

可以使用CSS的:hover伪类和后代选择器来实现：

HTML代码：

<div class="hover">
  <p>鼠标悬浮在此处</p>
  <table class="hover2">
    <tr>
      <td>表格内容</td>
      <td>表格内容</td>
    </tr>
    <tr>
      <td>表格内容</td>
      <td>表格内容</td>
    </tr>
  </table>
</div>

CSS代码：

.hover:hover .hover2 {
  display: block;
}

.hover2 {
  display: none;
}

解释：

首先，我们设置class为.hover的div的:hover伪类，表示鼠标悬浮在这个div上时的样式。然后，我们使用后代选择器（也就是空格）来选中这个div下面的class为.hover2的表格，并将其display属性设置为block，表示显示出来。而在.hover2的样式中，我们将其display属性设置为none，表示一开始是不显示的。

这样，当鼠标悬浮在.hover的div上时，它下面的.hover2表格就会显示出来。

相关问题

当鼠标悬停时，显示div的class属性

你可以使用JavaScript来实现这个功能。具体步骤如下：

1. 获取需要悬停的元素和需要显示class属性的div元素。
2. 给悬停的元素添加onmouseover事件，当鼠标悬停时触发该事件。
3. 在事件处理函数中，获取div元素的class属性，设置为该div的innerHTML。
4. 给悬停的元素添加onmouseout事件，当鼠标移开时触发该事件。
5. 在事件处理函数中，将div元素的innerHTML设置为空字符串。

下面是一个示例代码：

HTML代码：

<div id="hover-element">悬停在我上面</div>
<div id="display-class"></div>

JavaScript代码：

var hoverElement = document.getElementById("hover-element");
var displayClass = document.getElementById("display-class");

hoverElement.onmouseover = function() {
  displayClass.innerHTML = "class属性为：" + displayClass.className;
}

hoverElement.onmouseout = function() {
  displayClass.innerHTML = "";
}

当鼠标悬停在"hover-element"元素上时，"display-class"元素会显示"class属性为：xxxx"的文本，其中"xxxx"为"hover-element"元素的class属性值。当鼠标移开时，"display-class"元素会变为空字符串。

鼠标悬浮显示div，显示在上一层

的方法是什么？

可以使用CSS的z-index属性来控制div的层级，将需要显示在上一层的div的z-index值设置为比其他div更高的值即可。同时，使用JavaScript的onmouseover和onmouseout事件来控制鼠标悬浮时div的显示和隐藏。具体实现方法可以参考以下代码：

HTML代码：

<div class="hover-div">鼠标悬浮时显示的内容</div>
<div class="other-div">其他内容</div>

CSS代码：

.hover-div {
position: absolute;
display: none;
z-index: 999;
}

.other-div {
position: relative;
z-index: 1;
}

JavaScript代码：

var hoverDiv = document.querySelector('.hover-div');
var otherDiv = document.querySelector('.other-div');

otherDiv.onmouseover = function() {
hoverDiv.style.display = 'block';
}

otherDiv.onmouseout = function() {
hoverDiv.style.display = 'none';
}