當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

hover一个div展示另一个div

發布時間：2023/12/31 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 hover一个div展示另一个div 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

hover一個div展示另一個div

效果圖：

hover前：

hover后：

效果：

代碼：

<!DOCTYPE html> <html lang="zh-cn"><head><meta charset="utf-8" /><title>CSS Test Page</title><style type="text/css">* {margin: 0;padding: 0;}.cent {margin: 50px;background: #0CF;height: 100px;width: 100px;}.cs {margin: 100px;text-align: center;width: 100px;height: 100px;background: #F09;top: 0px;position: absolute;opacity: 0;display: block;font-size: 13px;transition: 0.3s;-webkit-transition: .5s;-moz-transition: .5s;}.cent:hover .cs {color: #656e73;opacity: 1;}</style></head><body><div class="cent">This is the parent div<div class="cs"><p>this is a child div</p></div></div></body></html>

總結

以上是生活随笔為你收集整理的hover一个div展示另一个div的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

div
hover