CSS:悬停文本同时保持 self 更正网格布局

标签 css html

http://codepen.io/tylerkung/pen/Bukzy

我已经实现了自校正网格,因此当您调整浏览器窗口大小时,3 个图像将简单地堆叠在一起。

我还能够让图像在鼠标悬停时淡出。

但我想添加的最后一点是在鼠标悬停时显示文本,这对我来说似乎很棘手。

我只是在学习 CSS,所以任何帮助/文章/建议都将不胜感激!

最佳答案

当容器链接悬停时,你想改变文本的不透明度,所以使用这个:

.wrapper:hover .text{
  opacity: 1;
}

代替

.text:hover{
  opacity: 1;
}

参见 updated codepen

关于CSS:悬停文本同时保持 self 更正网格布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24817206/

相关文章:

javascript - 如何返回由外部样式表类应用于元素的所有 CSS 属性(不获取计算样式!)?

css - parent 高度不跟随他们的 float child

javascript - 特定尺寸屏幕的 CSS(在我的例子中是 iframe)

html - 具有相同设置比例的嵌套 div 的列在略有不同的高度上呈现

javascript - 简单的 Vanilla javascript游戏

javascript - 当进度标签与栏重叠时如何反转进度标签

html - 缩放图像并在悬停时添加文本叠加

html - global wrapper div min-height 100vh 打破固定在移动设备上的 child

html - 外部样式表,指定绝对或相对路径

javascript - 带调用功能的Jquery触发器