gpt4 book ai didi

javascript - 为什么元素加载空白不透明度?还有为什么我的js取消了悬停效果?

转载 作者:行者123 更新时间:2023-11-28 07:58:38 27 4
gpt4 key购买 nike

我有一个元素,它应该在单击时淡出并在再次单击它的空格时淡入。此外,它的不透明度在可见时应为 0.9(而不是 1)。

我的代码有两个问题。一旦我单击元素并执行 js,悬停选择器似乎就会中断。 (一旦它消失,元素就会失去悬停效果。)第二个真的很奇怪,但我的 js 解释了它:最初元素不透明 == ""出于某种原因!我认为这可能是因为悬停效果使 js 混淆了不透明度的实际值。

function gitErDone(element){
var op = element.style.opacity;
if(op != 0){
fade(element);
return;
} else if(op == "" || op == null){
element.style.opacity = 1;
gitErDone(element);
return;
} else {
unfade(element);
return;
}
}

function fade(element) {
//works fine :)
}

function unfade(element) {
//works fine :)
}

这是相关的 CSS:

.sm-box{
float:left;
width: 100px;
height: 100px;
margin: 0px;
background-repeat:no-repeat !important;
background-position:center !important;
}
.sm-box:hover{
opacity: 0.9;
filter: alpha(opacity=90);
}

这是其自然栖息地中的元素:

<body>
<div class="container">
<div class="sm-box"></div>
<div class="sm-box"></div>
<div class="sm-box"></div>
<div id="elem" class="sm-box" onclick="gitErDone(this)"></div>
</div>
</body>

是的,我的 js 和 css 不能很好地协同工作。由于某种原因,js 将元素拉入空白不透明度,然后打破悬停不透明度效果。

最佳答案

让我们看看我是否理解您在这里寻找的内容:

您希望您的 div 具有不透明度 1 的性质。当您将鼠标悬停在它上面时,您希望它跳到不透明度 0.9。如果你点击它,它应该会消失。如果您再次单击它,它应该会再次淡入。

我看到的第一个问题是,您的悬停 css 定义和 js 执行可能没有很好地沟通,可能是因为悬停不是 Javascript 事件模型上的事件,所以对于您的 js 代码,一旦您单击,div 就会不透明1.

为了解决这个问题,我会使用 mouseMove 事件在不透明度 1 和 0.9 之间切换

关于javascript - 为什么元素加载空白不透明度?还有为什么我的js取消了悬停效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29948800/

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