gpt4 book ai didi

css - 转换 CSS 时出现转换错误

转载 作者:行者123 更新时间:2023-11-28 04:00:24 25 4
gpt4 key购买 nike

我已经做了一个关于过渡的问题,但是这次我必须做一些更难的事情,而且我又遇到了一次关于过渡的问题,老实说我不知道​​为什么它不起作用,反正。我做了一些国王“酒吧”,不管怎样,就像一个界面,基本上是一个加号的按钮。当您将指针悬停在按钮上时,它会上升并显示其他元素,并带有过渡效果。当我悬停时,过渡仅适用于带加号(trigger1)的按钮,但不适用于其他超链接。为什么?
代码如下:html

<html>
<head>
<title>Web Interface Test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="/interface.css" />
</head>
<body>
<div class="trigger">
<div class="div">
<center>
<span class="text">+</span>
</center>
</div>
<a class="element" href="#"></a>
<a class="element2" href="#"></a>
<a class="element3" href="#"></a>
</div>
</body>
</html>

和 CSS:

.div {
width: 50px;
height: 50px;
bottom: 5%;
right: 5%;
background: black;
transition: transform 300ms ease-in-out;
position: fixed;
z-index: 5;
border-radius: 50%;
visibility: visible;
}
.trigger:hover .div {
transform: translate(0px, -200px) rotate(45deg);
}
.trigger {
width: 50px;
height: 50px;
background: red;
position: absolute;
bottom: 5%;
right: 5%;
position: fixed;
z-index: 4;
border-radius: 50%
}
.element {
width: 50px;
height: 50px;
bottom: 5%;
right: 5%;
background: indigo;
transition: transform 300ms ease-in-out;
position: fixed;
z-index: 3;
visibility: hidden;
border-radius: 50%;
}
.trigger:hover .element {
transform: translate(0px, -50px);
visibility: visible;
}
.element2 {
width: 50px;
height: 50px;
bottom: 5%;
right: 5%;
background: yellow;
transition: transform 300ms ease-in-out;
position: fixed;
z-index: 3;
visibility: hidden;
border-radius: 50%;
}
.trigger:hover .element2 {
transform: translate(0px, -100px);
visibility: visible;
}
.element3 {
width: 50px;
height: 50px;
bottom: 5%;
right: 5%;
background: blue;
transition: transform 300ms ease-in-out;
position: fixed;
z-index: 3;
visibility: hidden;
border-radius: 50%;
}
.trigger:hover .element3 {
transform: translate(0px, -150px);
visibility: visible;
}
.text {
color: white;
font-size: 40px;
top:
}

非常感谢您的帮助!

最佳答案

这是因为当您的 .trigger 元素未悬停时,您在元素上设置了 visibility: hidden。看起来他们并没有转变,但实际上,他们只是在消失。

关于css - 转换 CSS 时出现转换错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43242969/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com