Question

我试图在我的页面上隐藏一个元素，但我仍然希望它在那里。我想要一个仍然可以点击的按钮，但我希望它不可见。

Answer 1

隐藏元素和保持页面位置有三种方法。您可以获得有关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>

Answer 2

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

 .opacityZero {
  opacity:0; 
}

澄清，下面是对3个属性的解释：

<强>可见性

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

<强>不透明度

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

<强>显示

如果您使用display：none，浏览器会认为该元素在DOM中不可用，因为它不会占用空间。

<强>样本

$(".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>

JSFIDDLE http://jsfiddle.net/a_incarnati/gna7r4L8/6/

Answer 3

只需让您的按钮透明：

$("#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

Answer 4

只需添加背景/颜色：rgba（0,0,0,0）; border：none;到css属性。

如何在保持页面的同时用css隐藏元素？

4 个答案: