div+css マウス通過に関連するいくつかの特殊効果_html/css_WEB-ITnose
1. 最初のタイプでは、マウスが通過すると次の情報が表示されます。
<
< style >
背景: #fff;
テキスト装飾: 12px;
テキスト整列: 1p x ソリッド
高さ: 25px;
line -height:25px;}/**//*リンクの属性を設定します。プロンプト層がリンクに従うようにするには、相対に設定する必要があります。*/
.info:hover
{...}{
color:#eee;
.info div
{. ..}{
表示: なし
}/**//*通常のスパンを非表示状態に設定します*/
.info:hover div /**//*ホバー下のスパン属性をプレゼンテーション状態に設定し、プロンプトレイヤーの位置を設定します*/
表示:ブロック;
左:60px;
幅:130px; :1px ソリッド #ff0000;
カラー:#000;
< "info" href ="#" > 111 を通過するマウス < 1111
< a class ="info" href ="#" > 222 を通過するマウス
< 22222222222222222 < >
< a class ="info" href ="#" > 333 を通過したマウスの効果です < 22222222222222222 2222< ;/ div >
実行エフェクト:
2. 2 番目のタイプ、曲のトラック情報が表示エフェクトに続きます:
< head > ="コンテンツ - タイプ" コンテンツ ="text/html; charset=gb2312" /> < タイトル >/ タイトル > < スタイル タイプ ="text/css" > ;!- -
*{...}{
margin:0px;
padding:0px;}
body {...}{
margin:10px;
a:link {. ..} {
カラー: #666;
テキスト装飾: なし;/**//*リンクの下線を削除*/}
a:visited {...}{
カラー: #666;
テキスト装飾: なし;}
a: ホバー {...}{
カラー: #F90;
h3 {...}{
背景色: #F90;
パディングトップ: 3px;
text-align:center;}
ul {...}{
width: 300px;
border-top: 1px ソリッド #F60;/**//*タイトルと一致するようにその上に行を追加します h3*/
}
ul li {... }{
パディング:5px;
border-bottom: 1px ソリッド #CCC;
list-style:none;/**//*リスト スタイルを削除します。これは標準ブラウザにとって重要です*/}
a {...}{
位置: 相対;/**//*配置方法を相対配置に設定すると、しばらくすると内部情報パネルが相対配置できるようになります。* /
ディスプレイ:ブロック;/**//* リンク テキストをクリックせずにリンクに応答できるように、リンクをブロック内に表示します。*/}
a div {...}{
ディスプレイ: なし;/**//*初期化情報パネルは表示されません*/}
a:hover {...} {background: #fff;}/**//*IE7 以下のバージョン ステータス疑似クラスのバグ*/
a:hover div {...}{
位置: 絶対;
表示: ブロック;
幅: 245px;/**//*幅を指定するだけで、高さはコンテンツに応じて自動的に調整されます。* /
/**//*これは親 A に対する相対的な位置です left:150px; top:20px;*/
ボーダー: 1px ソリッド rgb(91,185,233);
背景色: rgb(228,246,255);
z-index:999;/**//*リンクテキストが長すぎる場合にパネルに重ならないように、情報パネルを高い位置に上げます。ただし、これは FF でのみ機能します*/}
img { ...}{
幅:100px;
高さ:100px;
表示: ブロック; /**//*画像の境界線を削除します。デフォルトでは、標準ブラウザではリンク内の画像に境界線が表示されます。*/
top:5px ;/**/
/*通常のテキスト フローを分離するには絶対配置を使用します。そうしないと、デザイン時に異なるブラウザの通常の表示を考慮することがさらに面倒になります。*/
left:5px;}
dl {...}{
width: 120px;
color: #999;高さ:20px ;}
dl dd span {...}{
フォントの太さ: 太字;
カラー: #639;}
< ; ボディ >
< li < pic/ item/5cd8e8bffbdeec1819d81f96.jpg' target ='_blank' deec1819d81f96.jpg " alt ="" />
< dl >
< dd >< span > 曲名: 残念です 歌手: < >/ dd >
;/ 本文 >
;
実行効果:
3. 3 番目のタイプ、マウスが通過した後の画像のハイライト:
" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > html xmlns ="http://www.w3.org/1999/xhtml" > ; head >
< スタイル ="text-decoration:none;cursor:text;" > ;
< img src ="http://hiphotos.baidu.com/lk%5Feffice/pic/item/5cd8e8bffbdeec1819d81f96.jpg"
class ='highlightit' width ="200" height ="200" border =" 0 " />
実行効果:
マウス通過前:
マウス通過後:
4. マウス通過領域の色の変更効果:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999 /xhtml" >
< head >
< title > 色変更後の CSS 実用マウス
< style type ="text/css" > .. .
ボディ {. ..}{
背景: #fff;
フォントファミリー: "Lucida Grande"、
フォントサイズ: 11px; /
#tabs { ...}{padding:0 0 0 15px; list-style:none;}
#tabs li {...}{padding:#f8f8f8; ; float:left; margin-right:35px; 位置:relative;}
#tabs li.one {...}{width:190px;}
#tabs li.two {...}{width:240px;}
#tabs li.3 {...}{width:190px;}
#tabs li a.outer-link {...}{background:#f8f8f8;position:100%; }
#tabs table {...}{border-collapse:collapse; margin:-1px;}
#tabs li b {...}{display:block; no-repeat 0 0; パディング: 2px 0 0 5px;
高さ: 15px; オーバーフロー: 非表示;
#tabs li div {...}{border:1px 境界線の幅:0 1px 1px 1px;
#tabs li h3 {...}{margin:0; font-family:georgia, font-size:17px;}
#tabs li p {... }{font-family:verdana, serif; font-size:11px; line-height:1.5em;}
#tabs li a {...}{color:#000; ;}
#tabs li a.inner-link {...}{color:#c00; text-decoration:none;}
#tabs li a.inner-link:hover {...}{text-decoration:下線; カーソル:ポイント ;}
#tabs li.one:hover, #tabs li.one a.outer-link:hover {...}{background:#fef;}
#tabs li.two:hover, #タブ li.two a .outer-link:hover {...}{background:#cff;}
#tabs li.three:hover, #tabs li.three a.outer-link:hover {...}{背景:#ffc;
< クラス ="one" > IE 6]
| <[endif] --> Firefox < h3 >< a class ="http://services.google.com/toolbar/firefox?hl=en_GB" > Google ツールバー付き Firefox を入手 < 改良された Web ブラウザは、世界中の何百万人ものユーザーに加わりました。より良い Web エクスペリエンスを満喫してください < a class ="inner-link" href ="http://www.mozilla.com/en-US/firefox/" > ;/ a > < img ="mozilla.gif" alt ="Mozilla Firefox" /> [if lte IE 6 ]< |
「2」 > ;