ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryで模倣したタイトル属性(ie6/7互換)_jquery
jqueryで模倣したタイトル属性(ie6/7互換)_jquery
- WBOYオリジナル
- 2016-05-16 17:43:201097ブラウズ
jQuery を使用して a の title 属性を模倣する例。IE6 と 7 でレイヤーの混乱が発生しましたが、最終的には解決されました。
HTML コードは次のとおりです:
コードをコピーします コードは次のとおりです:
部署:技術部門
職場:鄭州
21
勤務地: 鄭州
採用人数: 21
部署:技術部
勤務地:鄭州< /p>
採用人数:21名
所属部署:技術部
勤務地:鄭州
採用人数:21名
部署: 技術部
勤務地: 鄭州
採用人数: 21 名
;
* {
margin:0;
}
body {
font-size:12px;
.wrap {
width:600px;
margin:100px auto;
.clearfix:after, .clearfix:before {
display:table;
}
.clearfix:after {
clear:both;
overflow: hidden;
}
.clearfix {
zoom: 1;
.list {
position:relative; //位置決めの親要素として li をそのまま使用し、要素内容が重複します。
}
.list li {
list-style:none ;
幅: 100px;
高さ: 24px;
float:left; a {
text -decoration:none;
color:#333;
}
.show {
position:absolute;
背景:# FFFFE1;
ボーダー:1px ソリッド #ffcc01;
表示:なし;
マージン:10px; //上を置換
margin-left:60px; //左を置換
}
.show p {
line-height:18px; >.list li a: hover {
text-decoration:underline;
color:#FF0000;
jQuery コードは次のとおりです
:
コードをコピー
コードは次のとおりです:
プレビュー効果;
部署: 技術部
勤務地: 鄭州
採用人数: 21 名
コードをコピーします
コードは次のとおりです:
* {
margin:0;
}
body {
font-size:12px;
.wrap {
width:600px;
margin:100px auto;
.clearfix:after, .clearfix:before {
display:table;
}
.clearfix:after {
clear:both;
overflow: hidden;
}
.clearfix {
zoom: 1;
.list {
position:relative; //位置決めの親要素として li をそのまま使用し、要素内容が重複します。
}
.list li {
list-style:none ;
幅: 100px;
高さ: 24px;
float:left; a {
text -decoration:none;
color:#333;
}
.show {
position:absolute;
背景:# FFFFE1;
ボーダー:1px ソリッド #ffcc01;
表示:なし;
マージン:10px; //上を置換
margin-left:60px; //左を置換
}
.show p {
line-height:18px; >.list li a: hover {
text-decoration:underline;
color:#FF0000;
jQuery コードは次のとおりです
:
コードをコピー
コードは次のとおりです:
プレビュー効果;
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。