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相关推荐

js操作数组更改其中一个数组值另一个数组也会改变
问题背景: 在vue项目中,在data中定义了两个数组对象,一个用于展示,一个用于修改操作.当修改其中一个数组的值时发现另一个也会跟着改变.代码如下: var regNeg = /^[0-9]{1,7 ...
HTML中div标签的一个简单的使用和介绍
<!-- 什么是块级元素: 块级元素的特点: 总是在新行开始高度,行高和外边距和内边距都可以进行控制宽度缺省的容器是100% 除非是设置一个宽度可以容纳其他的文本和其他的内联元素内联元素 ...
html div最多50个字符,javascript-计算多少个字符(来自一个字符串)将适合一个div而没有使其换行？...
所以我有一个< div>< / div>.我想知道在将字符串换行到下一行之前,它适合多少(长度)的字符串.该脚本应考虑元素的宽度(real clientWidth),左右边距以 ...
WEB前端面试题分别使用2个、3个、5个DIV画出一个大的红十字
[html] view plain copy <!DOCTYPE html>  <html> <body> <div st ...
js动态创建两个div 把其中一个添加到另一个的里面_我开发了一个鸿蒙在线教育APP！...
鸿蒙 2.0 已经发布了有段时间了,目前网上也有些小 demo 了,但是缺乏稍微大点的项目代码. 我准备计划开发一个稍微正式点的项目,我写了个初略的项目需求清单,来体验鸿蒙应用开发. 目前我已经着手实 ...
一个比较完美的spacer div技巧
一个比较完美的spacer div技巧原文出自:http://www.sharkui.com/articles/article.php?id=1 在制作网页的过程中,自适应问题是经常遇到,而又最让人 ...
div内容用html语言写,html – 使用DIV作为另一个元素的背景
这里我用2个div做了一个例子: > .content,包含前端所需的一切 > .background – 包含文本,图像和背景中的所有其他内容要将一个div包装在另一个div上(制作叠 ...
怎样调用另一个html中的元素,html – 使用DIV作为另一个元素的背景
这里我用2个div做了一个例子: > .content,包含前端所需的一切 > .background – 包含文本,图像和背景中的所有其他内容要将一个div包装在另一个div上(制作叠 ...
css div下第一个span,CSS之div和span标签
div和span是非常重要的标签,div的语义是division"分割": span的语义就是span"范围.跨度". 这两个东西,都是最最重要的"盒 ...

hover一个div展示另一个div

hover一个div展示另一个div相关推荐

最新文章

热门文章