文本缩进后链接无效：-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更改为-9999px，只需4位数。 其次，你错过了

的规则

#main_pane a {}

应该大致有：

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

如果您可以向我们提供指向您的示例的在线实时版本的链接，我会立即解决您的问题

Answer 3

尝试使用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%
    }