How to keep links and hover effects on my icon-fonts isolated with CSS

Question

I have a custom font-face to embed demographic icons on my webpage, with additional information stored in a link around the 'data-msg' element for each icon. The problem is that I cannot seem to define the CSS for these mouse-over messages without using a universal CSS assignment of the link property. This makes all links look weird on the page.

How do you constrain the CSS effects to just these icons?

I've created a working example of my problem on jsfiddle (even though this is a pure-css problem): http://jsfiddle.net/V6vpM/1/

Here is the code:

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 -- Here is the part that needs to be within a CLASS, but when I do that, it breaks the mouse-over effect:

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;
}

And here is the 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>

Rami Alshareef · Answer 1 · 2014-07-21T17:50:03.430

1

I would create a js file and make it changes the data-msg's value attribute, then you can reference the file back into your html page.

for example:

add a class for the first a you have

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

then change the data-msg through js

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

you have to include JQuery, you can get it from here

Don't forget to update you css to be a.notation instead of a. Here you go

edited Jul 21 '14 at 17:50

answered Jul 21 '14 at 17:00

Rami Alshareef

7,015
12
47
75

The problem isn't data-msg; it is that when I assign class="first" to the a href tag, it doesn't inherit the properties of the link that I specified above. Instead I get no mouse-over-text. – Marc Maxmeister Jul 21 '14 at 17:02
Okay, check this and let me know if it works for you so I may update the answer http://jsfiddle.net/V6vpM/2/ I have added another class `notation` and let the `a` style targets that class. This guarantee it well inherits the properties of the style you specified. you have to change the `css` too to be `a.notation` instead of `a` only – Rami Alshareef Jul 21 '14 at 17:07
Yeah - your a.notation worked. i was writing it differently. But for clarity to others, I'm "answering my own question" with the complete fixed code below. Thanks! – Marc Maxmeister Jul 21 '14 at 17:20

score 0 · Accepted Answer · answered Jul 21 '14 at 17:26

As Rami.Shareef explained in the jsfiddle, I needed to write the CSS class in this way:

CORRECT:

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

And refer to it in HTML this way:

<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>

and NOT in this way, as I had been trying to do:

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

}

or

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

It puts another class wrapping the link <'a href'> tag, as I had intended.

How to keep links and hover effects on my icon-fonts isolated with CSS

2 Answers2