Question

首先，这是我正在引用的页面：https://hypemarketing.co.uk/portfolio/

我一直试图弄清楚这些徽标的转换效果如何在Chrome的inspect元素控制台中工作几个小时。本质上，徽标在悬停时转换为基础文本，但在尝试使用我认为的机制属性，z-index，transform和transition重新创建效果时，我无法触发它。我搜索了MDN，W3Schools和其他Stack Overflow页面，但找不到明确的解释。

有人可以向我解释这种效果是如何起作用的吗？感谢任何帮助！

注意：我是编码的新手，请原谅我，如果答案非常简单。

更新：感谢下面的评论者，我了解了效果的效果！然而，在为自己尝试时，我仍然无法触发它。我在SO上找到了类似的答案，提到了可见性，但插入代码后仍然没有运行。我不确定问题出在哪里。这是我的代码：https://jsfiddle.net/eyd0jdap/

HTML：

<div class="container">
  <img class="logo" src="http://www.pngall.com/wp-content/uploads/2016/06/Nike-Logo-Free-PNG-Image.png">
  <p class="services"> This is sample text.
    <br> And some more sample text.</p>
</div>

CSS：

    .container {
  position: relative;
  background-color: lightblue;
  display: block;
  height: 300px;
  width: 300px;
  z-index: -10;
}

.logo {
  height: 150px;
  width: 150px;
  z-index: 2;
  padding-top: 80px;
  padding-left: 80px;
  visibility: visible;
  opacity: 1;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.logo:hover {
  opacity: 0;
  visibility: hidden;
}

.services {
  position: absolute;
  left: 25px;
  top: 35%;
  font-family: "times new roman";
  font-size: 22px;
  text-align: center;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.services:hover {
  opacity: 1;
  visibility: visible;
}

Answer 1

执行此操作时存在一些问题。首先，您需要从css中删除z-index，因为这是不必要的，并且会导致一些问题。现在更改:hover事件，使其依赖于容器而不是文本和徽标。这意味着它们将始终淡出/淡出彼此同步。

＆＃13;

.container:hover > .logo{
  opacity: 0;
}

.container:hover > .services{
  opacity: 1;
}

＆＃13;

其余代码保持不变。链接到codepen：https://codepen.io/pixelshadow/pen/BmKOdP?editors=1100

CSS元素转换/动画：不透明度问题

1 个答案: