当不透明度为 0% 时从元素中移除点击

Posted 2023-02-21

【中文标题】当不透明度为 0% 时从元素中移除点击

【英文标题】：Remove clicking from element when opacity is at 0%

【发布时间】：2012-09-07 01:04:43

【问题描述】：

我的页面上有一些内容需要淡出到 0% 的不透明度，而不是淡出并将元素从页面中完全移除，因此元素的高度和宽度仍然存在，但只是处于非活动状态。

问题是，该元素中的对象仍然是可点击的并且仍然会触发事件。有没有一种特殊的方法可以让它们处于非活动状态，还是很简单 cursor:default; 和 preventDefault();？

【参考方案1】：

尝试更改内容的可见性。

在css中，

visibility: hidden

这将隐藏元素，但仍会占据与完全显示时相同的宽度和高度。

更好的是，您可以淡出元素，然后更改其可见性：

$('#target').animate(
      opacity: 0
    ,
    1000, // specifies duration of fade (in milliseconds)
    function() 
        // this function will called after the opacity animation has completed
        $(this).css('visibility', 'hidden');
    
);

【讨论】：

谢谢！正是我需要的。我想知道这两者之间有什么区别……显示和可见性。

带有 display:none 的元素不会“保留”空间，就像那里没有元素一样。另一方面，具有可见性的项目：隐藏将保留空间，因为元素具有不透明度：0

【参考方案2】：

对我来说，它是这样工作的：

.dropdown-menu 
    transition: all .32s ease;
    opacity: 0;
    display: block;
    visibility: hidden;


.show 
    visibility: visible;
    opacity: 1;