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


Tags: css,font-face,icon-fonts

Problem :

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>


Solution :

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.


    CSS Howto..

    How to style Select2 input tags with css and how to limit them

    How to change Kendo Excel Button Content Text

    How to make mobile menu transition “backwards”?

    How to handle caching of GWT theme CSS files

    How can I make my website width fit fully on iphone 5?

    How to override the external CSS using some condition in Jquery?

    How to make Asp.net Gridview header and first column frezee?

    How can I use Perl to get a list of CSS elements with a color or background color attribute?

    How do I align a flow element next to a phrasing element?

    On textbox focus, how can you change the background color of the element prior to it with only CSS?

    Is not showing anything, or showing “undefined”

    How to draw a lens like circle on mouseover

    Div doesn´t show background color after float:left

    How to get rid of css inherited from a css file?

    How to make a double color single border using css?

    How can CSS have a significantly negative effect on page paint time in a specific area of a web page?

    How to change an input button with pure css button (no images)? [duplicate]

    How to check if style ID contains certain css selectors?

    How can I show this 2 div side by side?

    How to change the body background for three different div-s

    How to position a button to be always a certain distance from the screen in css? [closed]

    IOs Cordova long-press shows text-select magnifying glass even with text-selection disabled, how to remove?

    css how to get rounded corners on button.

    How to divide parent div's height between child divs

    how to set an element at fixed relative position in html rendering.? [closed]

    How can I use a CSS selector to match two classes being present?

    How to make background image on hover have a transition effect without default background image?

    How to catch this nth-child() with css

    How to put a div in center of browser using CSS?

    How do I get text in my html page to display features using the css stylesheet?