Как сохранить ссылки и эффекты наведения на мои иконки-шрифты изолированными с помощью CSS

У меня есть собственный шрифт для вставки демографических значков на мою веб-страницу, с дополнительной информацией, хранящейся в ссылке вокруг элемента "data-msg" для каждого значка. Проблема в том, что я не могу определить CSS для этих сообщений при наведении курсора, не используя универсальное назначение CSS для свойства link. Это делает все ссылки выглядят странно на странице.

Как вы ограничиваете эффекты 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>
Источник

2 ответа

Решение

Как объяснил 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'>, как я и предполагал.

Источник

Я бы создал js файл и сделать это меняет data-msgЗначение атрибута, то вы можете сослаться на файл обратно в ваш html стр.

например:

добавить 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.notation вместо a, Ну вот

Источник
Другие вопросы по тегам