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 do I get a div to fill the width regardless if the brower window is shrunk?

    how to fix a display difference between chrome and firefox for css relative position?

    CSS selector: How to select element sibling AND element itself?

    How can I exclude some images from being preloaded

    How to align a menu bar using css and html? [closed]

    How to float all child divs to center inside a parent div?

    How to apply @media for css attribute that are set via jquery

    how to center columns group

    How to remove the border that show after clicking a picture

    css: how to override max-width value with a larger (less restrictive) value

    How to precompile scss to a single css file in webpack?

    How to convert a HTML/CSS template to haml/sass template? [closed]

    How to combine wildcard and not selectors in CSS

    How to use objects returned by a function?

    CSS (Fixed width right, fluid left, left is first in html) How do I keep left div from collapsing?

    How can I do this: text inside rectangle using HTML/CSS?

    How to Stop Overriding of Bootstrap Css Styles

    How to create smaller CSS files for easier handling while developing [closed]

    How-to set background-position-x?

    How to set a background image in rails from css?

    How to fill larger image into smaller div?

    JQuery: Creating boxed text that shows on top of a div on hover

    How to achieve this layout with CSS?

    How to have your own style.css and bootstrap at the same time?

    How to add style or put a class in a php form_submit button

    how to center a webpage in CSS

    SCSS/SASS how apply style for all pseudo selectors

    How to create a

    How to create a specific X*X size table? (Battleship game) (HTML, CSS, JS)

    How can I style jQuery-UI autocomplete differently than jQuery-UI tabs?