子元素使用了 overflow: hidde 鼠标经过父元素怎么让他3秒显现

可以通过CSS的:hover和transition属性来实现鼠标经过父元素后子元素3秒钟内显现的效果。具体实现代码如下：

.parent {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.child {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #f00;
  transition: left 3s ease-out;
}

.parent:hover .child {
  left: 0;
}

在上述代码中，父元素的overflow属性值为hidden，子元素的left属性值为-100%，表示子元素默认隐藏在父元素的左侧。然后，当鼠标经过父元素时，子元素的left属性值变为0，即子元素向右移动显示出来。同时，子元素的transition属性值为3s，表示子元素从左侧移动到右侧的过程需要3秒钟，也就是在3秒内显现。

相关问题

微信小程序控制属性wx:if和hidde的差异？简答

在微信小程序中，`wx:if` 和 `hidden` 都用于条件渲染元素，但它们的使用场景和效果稍有不同：

1. `wx:if`：这是一个指令，用于根据给定的布尔表达式来显示或隐藏元素。当表达式的值为真时，元素会被渲染出来；如果为假，则元素及其包含的内容会被完全移除，不会占用屏幕空间。比如：

   <view wx:if="{{isShow}}">显示的内容</view>

2. `hidden`：这是HTML5的一个属性，在小程序中同样可以应用于元素，但它只是简单的设置了元素的可见性，而不是像 `wx:if` 那样从视图中彻底删除。当 `hidden` 属性值为 `true` 或者 `{{hiddenValue}}` 为真时，元素会变为不可见，但其结构仍然存在，占据屏幕空间，只是为了视觉效果将其隐藏。例如：

   <view hidden="{{hideElement}}">隐藏的内容</view>

总结来说，`wx:if` 更适合于需要完全移除元素的情况，而 `hidden` 则更适合于只改变元素可见性的场景。两者配合使用可以根据需求提供更丰富的动态展示效果。