Animated element does not change the style on hover

Question

I have this function:

$(document).ready(function() {
  function animatexyz() {
    $('.xyz-ico a').animate({
      opacity: '.5'
    },1000).animate({
      opacity: '.15'
    },1000, animatexyz); 
  }
  animatexyz();
}

The element(xyz-ico a) shall blink continuously until i move my mouse over it, then it shall just be fully visible (opacity 1). After i leave the element it must continue to blink.

In my CSS files the ".xyz-ico a:hover" pseudo element has a opacity of 1 but as long as i use this animation'loop', nothing changes when i move my mouse over the element.

My CSS code:

.xyz-ico {
  position:fixed; 
  top:150px; 
  right:30px; 
  z-index:999;
}

.xyz-ico a {
  opacity: .15;
}

.xyz-ico a:hover {
  opacity: 1;
}

I tried to implement the .hover and the mouseover jquery function into my jquery code but that didn't work (just for a very short moment between the two animation steps i guess). It seems that the loop 'overwrites' the opacity value everywhere. Maybe you have an idea how i can simply solve this problem.

Thanks a lot :)

Answer 1

This should do it:

.xyz-ico a:hover {
  opacity: 1 !important;
}

The reason is that jquery sets the style directly to the element which overwrites any styles set in your stylesheets due to the cascading nature of Cascading Style Sheets (CSS) which goes like this:

(From: http://webdesign.about.com/od/css/f/blcssfaqcascade.htm )

There are three different types of style sheets:

1. Author Style Sheets These are style sheets created by the author of the Web page. They are what most people think of when they think of CSS style sheets.

2. User Style Sheets User style sheets are set by the user of the Web page. These allow the user to have more control over how the pages display.

3. User Agent Style Sheets These are styles that the Web browser applies to the page to help display that page. For example, in XHTML, most visual user agents display the <em> tag as italicized text. This is defined in the user agent style sheet.

To resolve conflicts, Web browsers use the following sorting order to determine which style has precedence and will be used:

1. First, look for all declarations that apply to the element in question, and for the assigned media type.

2. Then look at what style sheet it's coming from. As above, author style sheets come first, then user, then user agent. With !important user styles having higher precedence than author !important styles. The more specific a selector is, the more precedence it will get. For example, a style on "div.co p" will have a higher precedence than one just on the "p" tag.

3. Finally, sort the rules by the order they were defined. Rules that are defined later in the document tree have higher precedence than those defined earlier. And rules from an imported style sheet are considered before rules directly in the style sheet.