1

Web ページに人口統計アイコンを埋め込むためのカスタム フォント フェイスがあり、各アイコンの「data-msg」要素の周りのリンクに追加情報が保存されています。問題は、link プロパティのユニバーサル CSS 割り当てを使用しないと、これらのマウスオーバー メッセージの CSS を定義できないように見えることです。これにより、ページ上のすべてのリンクが奇妙に見えます。

CSS 効果をこれらのアイコンだけに制限するにはどうすればよいでしょうか?

私はjsfiddleで私の問題の実例を作成しました(これは純粋なcssの問題ですが): http://jsfiddle.net/V6vpM/1/

コードは次のとおりです。

CSS

@font-face {
font-family: 'unicorns';
src: url('http://djotjog.com/font/unicorns.eot');   
src: url('http://djotjog.com/font/unicorns.woff') format('woff'),         
url('http://djotjog.com/font/unicorns.svg#unicorns') format('svg'),
url('http://djotjog.com/font/unicorns.ttf') format('truetype'),
url('http://djotjog.com/font/unicorns.eot?#iefix') format('embedded-opentype');
}

.icon:before {
    font-family: "unicorns", sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -o-transform: scale(1);
}
.boy:before {content: "a";}
.girl:before {content: "b";}
.teen_boy:before {content: "c";}
.teen_girl:before {content: "d";}
.middle_aged_man:before {content: "e";}
.middle_aged_woman:before {content: "f";}

.food_shelter:before {content: "i";}
.phys_need:before {content: "h";}
.security:before {content: "s";}
.family:before {content: "j";}
.knowledge:before {content: "k";}
.respect:before {content: "r";}
.creativity:before {content: "q";}
.self_esteem:before {content: "n";}
.freedom:before {content: "m";}
.fun:before {content: "p";}


.icon-green:before {color: #008000;}
.icon-green-yellow:before {color: #a3b900;}
.icon-yellow:before {color: #e9b800;}
.icon-yellow-red:before {color: #cc6600;}
.icon-red:before {color: #cc0000;}
.icon-pink:before {color: #ff99ff;}
.icon-blue:before {color: #879aaf;}
.icon-gg-green:before {color: #a3b900;}
.icon-orange:before {color: #db8600;}
.icon-brown:before {color: #534400;}
.icon-bright-blue:before {color: #6590AF;}
.icon-black:before {color: #000000;}
.icon-grey:before {color: #505050;}

.icon-5:before {font-size: 5px; margin-right: 1px;} 
.icon-9:before {font-size: 9px; margin-right: 2px;} 
.icon-10:before {font-size: 10px; margin-right: 2px;}
.icon-11:before {font-size: 11px; margin-right: 2px;}
.icon-12:before {font-size: 12px; margin-right: 2px;}
.icon-14:before {font-size: 14px; margin-right: 2px;}
.icon-16:before {font-size: 16px; margin-right: 2px;}
.icon-18:before {font-size: 18px; margin-right: 3px;}
.icon-24:before {font-size: 24px; margin-right: 5px; line-height: 100px;}
.icon-30:before {font-size: 30px; margin-right: 5px;}
.icon-36:before {font-size: 36px; margin-right: 5px;}
.icon-42:before {font-size: 42px; margin-right: 5px;}
.icon-48:before {font-size: 48px; margin-right: 5px; line-height: 100px;}
.icon-54:before {font-size: 54px; margin-right: 5px; line-height: 100px;}
.icon-60:before {font-size: 60px; margin-right: 5px;}
.icon-72:before {font-size: 72px; margin-right: 5px; line-height: 100px;}
.icon-96:before {font-size: 96px; margin-right: 5px; line-height: 100px;}  
.icon-128:before {font-size: 128px; margin-right: 5px; line-height: 130px;}

CSS -- クラス内にある必要がある部分は次のとおりですが、これを行うと、マウスオーバー効果が壊れます。

a {
position:relative;
  text-decoration:none;
  font-size:x-small;
}
 a:before, a:after {
  bottom:0;
  display:none;
  position:absolute;
}
a:before {
  border-top:1em solid #534400;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  content:"";
  left:5px;
  margin-bottom:1em;
}
 a:after {
  background-color:#dddddd;
  border-radius:7px;
  color:#534400;        
  content:attr(data-msg);
  left:0;
  margin-bottom:6em;
  padding:7px 7px;
  white-space:pre-wrap;
}       
 a:hover:after,
 a:hover:before {
  display:block;
}

HTML は次のとおりです。

<a href="" data-msg="The 0% of stories related to girls, 16 and under were fewer than observed in stories overall. (0.0048/0.05= 0.1)"><span class="icon girl icon-green icon-18 msg"></span></a>
<a href="" data-msg="The 0% of stories related to boys, 16 and under were fewer than observed in stories overall. (0.0048/0.06= 0.08)"><span class="icon boy icon-red icon-18 msg"></span></a>
<a href="" data-msg="The 28% of stories related to girls, age 17 to 30 were about the same as observed in stories overall. (0.2837/0.25= 1.13)"><span class="icon teen_girl icon-red icon-48"></span></a>
<a href="" data-msg="The 25% of stories related to boys, age 17 to 30 were about the same as observed in stories overall. (0.25/0.33= 0.76)"><span class="icon teen_boy icon-green icon-48"></span></a>
<a href="/c/stest?group_select=112&q122=%5B%2731-45%27%2C+%2746-60%27%2C+%27Over+60%27%5D&verbose=complete&submit=Fetch+stories%21&q10=female" data-msg="The 24% of stories related to middle-aged women over 30 were more than observed in stories overall. (0.2452/0.16= 1.53)" ><span class="icon middle_aged_woman icon-green-yellow icon-72 msg"></span></a>
<a href="" data-msg="The 15% of stories related to middle-aged men over 30 were about the same as observed in stories overall. (0.1587/0.16= 0.99)"><span class="icon middle_aged_man icon-green-yellow icon-48"></span></a>
4

2 に答える 2

1

ファイルを作成しての value 属性をjs変更すると、ファイルを参照してページに戻すことができます。data-msghtml

例えば：

あなたが持ってclassいる最初のa

<a href="" class="first notation"><span class="icon girl icon-green icon-18 msg"></span></a>

次にdata-msgスルーを変更しますjs

$(document).ready(function () {
    $(".first").attr("data-msg", "some text");
});

を含める必要があります。ここJQueryから入手できます

の代わりに更新するcssことを忘れないでください。どうぞa.notationa

于 2014-07-21T17:00:20.330 に答える
0

Rami.Shareef が jsfiddle で説明したように、CSS クラスを次のように記述する必要がありました。

正しい：

a.notation:hover:after,
a.notation:hover:before {
 display:block;
}

そして、このように HTML で参照します。

<a href="" class="notation" data-msg="The stories related to girls, 
age 17 to 30 were about the same as observed in stories overall.">
<span class="icon teen_girl icon-red icon-48"></span></a>

私がやろうとしていたように、この方法ではありません：

.notation a:hover:after,
a.notation:hover:before {
display:block;

}

また

.notation:a:hover:after,
a.notation:hover:before {
display:block; 
}

意図したとおり、link <'a href'> タグをラップする別のクラスを配置します。

于 2014-07-21T17:26:54.247 に答える