【CSS 杀我】flex+position实现鼠标悬停图片显示文字

发表于 | 分类于
本文字数： 3.4k | 阅读时长 ≈ 8 分钟 | 评论数：

　　实现雏形在这里：- | 梦蚀° Dear Dreamer -
　　暂时还没加图片，因为没画好，但是最基本的flex排版和文字居中对齐都已经搞好了，除了垂直居中……最后我也没弄成垂直居中的样子，多套几个div可能有救，但是我不想再折腾了！！！ :-cmx-02-:


.+†+.

　　其实问题还是挺多的，比如我博客里给img搞了全局样式的问题，每次写新页面都要搞一堆多余作业（比如emoji的图片并不是img标签而是span的背景图片），但是就结果来说反倒是保持了整个blog样式的整体性 :-cmx-05-: 【不也挺好的吗.jpg
　　但总体上还是实现了OTL果然是世上无难事只要肯谷歌。其实我觉得配合JS实现可能会更简单？因为看了一下lofter那个模板就是用JS单独计算了每个元素的绝对位置【发现了这个事实的我真是眼前一黑，总之先把笔记做了。

html构架

1
2
3
4
5
6
7
8
9
10
<div class='容器'>
	<div class='子元素'>
		<a href="链接">
			<img src="1×1比例的背景图">
				<span class='filter（悬停后的文字背景）'></span>
				<span class='title'>- 出现的文字 -</span>
			</img>
		</a>
	</div>【以上×3】
</div>

　　哇我单双引号为什么没统一啊！！【

排版容器部分

　　容器样式：

1
2
3
4
display: flex;
width: 100%;
justify-content: center;
flex-wrap: no-wrap;

　　第三行：子元素居中显示；
　　第四行：禁止子元素换行。

如何让子元素保持正圆型

　　这个问题本来做友链界面的时候就应该发现的……但是刚好头像全部是1×1的正方形就巧妙地跳过了，后来有人反映有些头像外链被墙了看不见排版变得很诡异才想到这个问题，然而研究的结果是——

  • 问：如何用CSS使div元素固定宽高比？
  • 答：对不起，CSS是做不到的。

　　是的，以上就是我谷歌了一整晚的最终答案。CSS保持单个元素的宽高比有两个方案，一是限定父元素的长宽比为1:1之后用padding-bottom来实现，另一种就是使用屏幕百分比单位作为宽和高。然而这两种方法都没法和flex同时使用，我blog所有的响应式布局又都是用flex写的，那么问题就来了：我玩nm呢？
　　最后还是用了和友链界面一样的方法，在子元素里塞了一张正方形的图片，用CSS块元素适应图片比例的特性来实现维持1:1比例的响应式布局。

子元素样式：

1
2
flex-basis:30%;	
margin: 0 2%;

　　第一行其实是用来控制每行子元素的数量的，在这个页面里并没有用也没有生效，但是之后修改友链的时候可能会用到。这个样式是限定子元素的最大宽度，会覆盖原本的元素尺寸，仅对div元素生效。原理就是100整除你希望每行排列的元数量再根据间距适当减小，比如我友链界面设置的是26。
　　第二行就是间距，第一个数值是纵向间距第二个是横向的，要考虑一下全局的img标签样式但是横向一般没啥问题。

链接样式：

1
2
3
border-bottom: 0px;
border-radius: 50%;
display: block;

　　第一行：移除链接下划线；
　　第二行：把链接反应范围设置成圆形；
　　第三行：由于链接里没有写字，所以不设置成block的话元素会自动隐藏。

图片样式：

1
2
3
4
width: 500px;
height: auto;
object-fit: cover;
border-radius: 50%;

　　第一行：图片宽度设置得大一点防止flex排版的时候出现问题，不过设置了flex-basis之后好像不用担心这个问题；
　　第二行：auto=高度自适应图片；
　　第三行：保证图片能全部显示；
　　第四行：把图片变成圆形。

　　目前的页面上我用的是10×10的透明png……到时候直接把url替换进img标签就好。

在图片背景上添加文字

　　CSS杀我另一个谷歌了N+小时的问题，最后奇迹般地解决了……

文字层设置

1
2
3
4
position: absolute;
top: 60%;
width: 100%;
text-align: center;

　　呜呜呜我懒得打字了第一行：使用父元素的相对位置定位元素；
　　第二行：设置不了垂直居中，退而求其次用百分比代替；
　　第三行+第四行：文字水平居中。

　　这么设置完你会发现文字层的宽度变成了整个post窗口的宽度……因为position: absolute的父元素必须设置上position: relative才能被识别生效，不要问我为什么，我也不知道 :-cmx-11-:
　　然后还有一个特别重要的事情就是，img标签里只能放图片，就算你在span后面加个</img>也没用，因为这个标签它是不需要闭合的……所以这个relative我放在了flex子元素的div上，理论上放在a标签上大概也可以？看习惯吧，我是觉得在链接上放排版样式不太好……【说得好像你之前有少这么写一样 :-cmx-03-:

鼠标悬停动画

　　至此排版已经全部完成了，动画这个东西其实是自由发挥的，我就记一下保持动画整体性的小技巧吧，就是↓

　　不要把动画写在子元素的伪类上。

　　举个例子，下面有一个div，我希望鼠标悬浮在div上的时候div和里面的文字一起变色，如果用.test-div1 p:hover这种写法的话，背景和文字是分开来变色的，鼠标放在div内没有被文字元素填充的地方时，只有div会变色。

喵喵喵喵


　　这个时候应该把子元素写在父元素的伪类后面，例：.test-div1:hover p

喵喵喵喵


　　这样就实现整体动画啦~