0

テキストを画像に置き換えようとしています。テキストを-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>
4

3 に答える 3

1

img直接的な答えではありませんが、代わりにタグを使用しないのはなぜですか?

<div id="main_pane">
  <a href="#"><img src="panel-close-arrow.png" /></a>
</div>
于 2013-04-30T02:56:27.187 に答える
0

これを試してみてください。text-indent プロパティの主な問題です。

#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%
    }
于 2013-04-30T05:22:06.423 に答える
0

まず、text-indent を -9999px の 4 桁に変更します。第二に、次のルールがありません

#main_pane a {}

大まかに持っている必要があります：

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

あなたの例のオンラインのライブ バージョンへのリンクを提供していただければ、すぐに問題を解決します

于 2013-04-30T02:59:45.277 に答える