如何使用css隐藏元素，同时仍然保留在页面上？

我想隐藏我的页面上的元素，但我仍然希望它在那里。我想要一个仍然可以点击的按钮，但我希望它不可见。如何使用css隐藏元素，同时仍然保留在页面上？

2015-04-12 Jim Peeters

有三种方法来隐藏要素，并保持页面位置。您可以获取有关Normal flow和css样式（即：opcity，visibility）属性关系的更多信息。

知名度
opcity
透明

$('div').click(function(){ 
 
    alert(this.innerHTML) 
 
})

div{ 
 
    border: 1px solid #000; 
 
} 
 
.one{ 
 
    visibility:hidden; 
 
} 
 
.two{ 
 
    opacity: 0; 
 
} 
 
.three{ 
 
    background: transparent; 
 
    color: transparent; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    1 
 
    <div class="one">visibility</div> 
 
    2 
 
    <div class="two">opticy</div> 
 
    3 
 
    <div class="three">transparent</div> 
 
    4 
 
</body> 
 
</html>

来源

2015-04-12 12:11:41

只是让你按键透明：

$("#invisible").click(function() { 
 
    alert("Invisible is clicked"); 
 
});

#invisible { 
 
    background: transparent; 
 
    color: transparent; 
 
    border: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="invisible">I am invisible</button> <- Click here

来源

2015-04-12 11:04:21

只需添加一个背景/颜色：RGBA（0,0,0,0）; border：none;到CSS属性。

来源

2015-04-12 11:09:33 Athax

你当答案只说 “添加显示：无;到CSS属性” 被downvoted。你真的*确定你不知道它为什么被低估？ – JJJ

@Juhana在我纠正了我的信息后，我第一次意识到自己被低估了。 – Athax

使用不透明度：0,如果您还想访问div的子元素，您需要隐藏。

.opacityZero { 
    opacity:0; 
}

为了澄清，3个属性的说明如下：

能见度

使用CSS visibility属性，您可以切换使用隐藏的价值元素的可见性或可见。如果隐藏了该元素，则该元素将对用户隐藏，并且用户无法访问它的子元素，但仍然在DOM中元素的空间将被消耗。

透明度

如果使用不透明度：0隐藏的元素，它看起来像隐藏乍一看，但仍是用户可以访问的子元素。它也消耗DOM中元素的空间。如果你有一个链接作为子元素，如果你设置不透明度为0，它仍然是可点击的。这是你的选择。

显示

如果您使用display：none，则浏览器会考虑仿佛元素不具备的DOM的结果也不会占用空间。

DEMO

$(".opacityZero, .visibilityHidden").click(function() { 
 
    alert("Button is clicked"); 
 
});

.opacityZero { 
 
    opacity:0; 
 
} 
 

 
.visibilityHidden { 
 
    visibility:hidden; 
 
    margin-top:20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="opacityZero"> 
 
<button >I am invisible</button> 
 
</div><span>↑ Click above (Opacity:0 - children clickable</span> 
 
    
 
<div class="visibilityHidden"> 
 
<button>I am invisible</button> 
 
</div><span>↑ Click above (Visibility hidden - children not clickable</span>

的jsfiddlehttp://jsfiddle.net/a_incarnati/gna7r4L8/6/

来源

2015-04-12 11:52:07

如何使用css隐藏元素，同时仍然保留在页面上？

回答

相关问题