クリックエリア100%のスライドドアコード-CSSチュートリアル-php.cn

クリックエリア100%のスライドドアコード

PHP中文网

リリース： 2016-05-16 12:08:41

オリジナル

1565 人が閲覧しました

標準を勉強している友人は、通常、学習の過程で css スライディングドアテクノロジーに触れるでしょう。もしかしたら、この記事「css のスライディングドアテクノロジー」も読んだことがあるかもしれません。これまで触れたことがない、または経験したことがない場合は、まだ読んでいませんが、上記の記事を読んだことがあっても、内容を忘れてしまったとしても問題ありません。まず、上の記事のリンクをクリックして理解または確認してください。

記事「css のスライドドアテクノロジー」のスライドドアの例で、注意深く実験してみると、リンク領域にクリックできない 9 ピクセルの死角があることが判明したかもしれません。 ie ではテキストのみをクリックできます。部分的なサイズのため、ボタンブロック全体をクリックできません。私たちが期待できるのは、ボタンブロック全体をクリックでき、死角が許されないということです。

では、それを達成するにはどうすればよいでしょうか?いくつかの解決策について一緒に議論しましょう:

まず、便宜上、「css のスライディングドアテクノロジー」のコードを移動しましょう:
xhtml 部分:

<div id="header">  
  <ul>  
    <li><a href="#">home</a></li>  
    <li id="current"><a href="#">news</a></li>  
    <li><a href="#">products</a></li>  
    <li><a href="#">about</a></li>  
    <li><a href="#">contact</a></li>  
  </ul>  
</div>

ログイン後にコピー

css 部分:

#header {  
  float:left;  
  width:100%;  
  background:#DAE0D2 url("bg.gif") repeat-x bottom;  
  font-size:93%;  
  line-height:normal;  
}  
#header ul {  
  margin:0;  
  padding:10px 10px 0;  
  list-style:none;  
}  
#header li {  
  float:left;  
  background:url("left.gif") no-repeat left top;  
  margin:0;  
  padding:0 0 0 9px;  
}  
#header a {  
  float:left;  
  display:block;  
  background:url("right.gif") no-repeat right top;  
  padding:5px 15px 4px 6px;  
  text-decoration:none;  
  font-weight:bold;  
  color:#765;  
}  
/* Commented Backslash Hack  
   hides rule from IE5-Mac \*/  
#header a {float:none;}  
/* End IE5-Mac hack */  
#header a:hover {  
  color:#333;  
}  
#header #current {  
  background-image:url("left_on.gif");  
}  
#header #current a {  
  background-image:url("right_on.gif");  
  color:#333;  
  padding-bottom:5px;  
}

ログイン後にコピー