时间戳

首页 > 解决方案 > 将 tumblr 控件隐藏在图标后面并在悬停时显示它们

html - 将 tumblr 控件隐藏在图标后面并在悬停时显示它们

问题描述

我正在研究 Tumblr 主题，但似乎无法弄清楚如何将 iframe 控件隐藏在图标后面。目前，这是我的 CSS：

.tmblr-iframe-compact .tmblr-iframe--unified-controls {z-index: 999999999!important;}

.tmblr-iframe{
   white-space: nowrap;
   -webkit-filter: invert(100%);
   -moz-filter: invert(100%);
   -o-filter: invert(100%);
   -ms-filter: invert(100%);
   filter: invert(100%);
   opacity: .2; 
   transition: .4s ease-in-out;
   transform: scale(0.7,0.7);
   transform-origin: right top;
}

.tmblr-iframe:hover {opacity: 1;}

所以我让它们在悬停时显示（嗯，至少不透明度会增加），但我想知道如何将它们隐藏在某些东西后面？我已经看到它使用了很多，比如图标字体。我在谷歌上搜索了很多，但这并没有帮助。我知道 Tumblr 上的一个旧主题制作者对此有代码，但它们已被停用，因此很遗憾无法再使用它。

标签： htmlcsstumblr

解决方案

我想你想要这样的东西：

.buttons-container:hover .tx-icon-button { // not sure if this is the right selector, see below
  opacity: 0.2;
}

.tx-icon-button {
 opacity: 0.2; // you might not want this
}

.tx-icon-button:hover {
  opacity: 1;
}

我不知道您在哪个元素上触发悬停类来显示图标。你是通过 JS 做的吗？我在 css 中找不到任何东西。CSS 将是更轻的选择。

推荐阅读