jquery - 文本缩进后链接不起作用：-9999px

Question

我正在尝试用图像替换文本。当我将文本缩进-9999px。图片不可点击。如何使图像可点击？

jQuery

$(function() {
  $("#left_pane").css("left","-300px");
  $("#middle_pane").css("left","0px");

  $(".toggle_right_pane").toggle(function() {       
  $('#left_pane').animate({ left: '0' }, 500);
  $('#main_pane').animate({ left: '213' }, 500);
  }, function() {       
    $('#left_pane').animate({ left: '-300' }, 500);
    $('#main_pane').animate({ left: '-15' }, 500);
  });
});

CSS

#left_pane{
  float:left;
  display:block;
  width: 240px;
  height: 100%;
  overflow:hidden;
/*    background: grey; */
  position:absolute;
  z-index:1
}


#main_pane{
  float:left;
  height:100px;
  left:0px;
  overflow:hidden;
  position:relative;
  border:2px solid green;
  background: url("panel-close-arrow.png") no-repeat scroll 2px 2px transparent    ;
  padding: 21px 10px;
  right: 0;
  text-indent: -99999px;
  display:block;
  width:350px;
}

HTML

<div id="left_pane">
  <!--Content Here-->
</div>
<div id="main_pane">
  <a class="toggle_right_pane" href="#">show/hide</a>
</div>

Answer 1

不是直接的答案，但你为什么不使用img标签呢？

<div id="main_pane">
  <a href="#"><img src="panel-close-arrow.png" /></a>
</div>

Answer 2

试试这个 text-indent 属性的主要问题。如果你将它与#main_pane 一起使用，它将完成一个标记，所以将它与一个标记一起使用

#main_pane{
  border:2px solid green;
  background: url("panel-close-arrow.png") no-repeat scroll 2px 2px transparent; 
  float:left;
  height:100px;
  width:350px;
  padding: 21px 10px;  
  overflow:hidden;
  position:relative;
  left:0px;
  right: 0;
}

#main_pane a{
    text-indent: -99999px;
    display:block;
    height:100%
    }

Answer 3

首先，我将 text-indent 更改为 -9999px，只有 4 位数字。其次，您缺少以下规则

#main_pane a {}

大致应该有：

display:block;
overflow:hidden;
width:100%;
height:100%;

如果您能给我们一个指向您示例的在线实时版本的链接，我会立即解决您的问题