sIFR - getting a:hover to work in navigation list

Posted by HudRom on Stack Overflow See other posts from Stack Overflow or by HudRom
Published on 2009-08-27T18:09:05Z Indexed on 2010/04/17 2:03 UTC
Read the original article Hit count: 384

Filed under:

sifr

|

hover

Hi,

I am currently struggling with sIFR and a:hover. My problem site is hosted at http://irene.huditsch.info

I have the following HTML code:

 <body id="irene-huditsch-info">
      <div id="header">
    <h1>Irene Huditsch</h1>
    <div id="top-nav">
       <ul>
          <li id="impressum">
    	<a href="impressum.html" rel="index">Impressum</a>
          </li>
          <li id="kontakt">
    	<a href="kontakt.html">Kontakt</a>
          </li>
       </ul>	
    </div>
        ...

My sIFR-config.js looks like:

sIFR.replace(braganza, {
  selector: 'div#top-nav a',
  css: '.sIFR-root { background-color: transparent; color: #FFFFFF; line-height: 13px; font-size: 11px; text-decoration: underline; cursor: pointer; } .sIFR-root:hover { color: #592b02; }',
  wmode: 'transparent'
});

But the hover doesn't take effect. I tried different solution with no success either.

When I write

sIFR.replace(braganza, {
  selector: 'div#top-nav li',
  css: 'a { background-color: transparent; color: #FFFFFF; line-height: 13px; font-size: 11px; text-decoration: underline; cursor: pointer; } a:hover { color: #592b02; }',
  wmode: 'transparent'
});

(which seems logical to me), the list items are not rendered at all.

Could you please give me an advice how to do it correctly with the structure given?

Thanks, Roman

© Stack Overflow or respective owner

Related posts about sifr

problem with sIFR 3 not displaying in IE just getting XXX

as seen on Stack Overflow - Search for 'Stack Overflow'
I am having a problem with sIFR 3 not displaying in IE. I get 3 larges black XXX in IE yet it displays fine in Firefox. I have checked i do have the most recent version of flash installed correctly. Here is the code on the page <div id="features"> <div id="mainmessage_advertisers"><h2>Advertisers</h2><br… >>> More
sIFR 3 HTML text does not display, .sIFR-alternate causing problem

as seen on Stack Overflow - Search for 'Stack Overflow'
It seems my sIFR 3 text does not show HTML text if the Flash text is not displayed. Here's one of the pages in question: http://www.jeremyschultz.com/client/orchardplace/website/beta/volunteer/ One person has reported not seeing anything when viewing this page, and I can recreate it by removing… >>> More
SIFR 3.0 - Font Size

as seen on Stack Overflow - Search for 'Stack Overflow'
I have been working with SIFR 3.0 for some time now and the font-size never seems to work correctly. I understand the most basic concepts behind SIFR. SIFR runs when you load the page. It does some calculations one the size of the HTML rendered font and then replaces it with a flash movie that is… >>> More
Problem Rendering SIFR with revision 436 on IE6 and IE7

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I seem to have a problem with SIFR3. I'm using version 436 and from all my testing it appears to be a problem associated with IE6 and IE7 as I cannot replicate the issue in Firefox, Chrome, Safari for Windows, or even IE8. The problem is occurring on my company's website and can be seen here:… >>> More
sIfr (3.436) and IE8 - My h1 and h2 are flickering

as seen on Stack Overflow - Search for 'Stack Overflow'
I am using sIfr (3.436) for my H1 and H2 tags. In IE8 the text flickers and jumps around alot. See example: http://www.addenergy.no/drilling-production/category352.html I have tried various font-tuning as explained at Wiki.Novemberborn, but can't get a good result. Any help to lead in the right… >>> More

Related posts about hover

CSS How to apply child:hover but not parent:hover

as seen on Stack Overflow - Search for 'Stack Overflow'
With the following html, when I hover over child, I get a green background on parent. How can I stop that from happening? I do want the green background if I am hovering outside of the child element. CSS3 is fine. <style> .parent { padding: 100px; width: 400px; height:400px; } … >>> More
jQuery Hover Problem - Hover Triggers on Mouse Move

as seen on Stack Overflow - Search for 'Stack Overflow'
For reference: http://www.favsav.com/-public You'll notice that if you hover over a list item, the meta data slides up. If you leave your mouse still on top, and then move a smidgen to the left or right, it triggers again. There's some other silliness going on if you move around The code is pretty… >>> More
jQuery hover DIV- stay active if they hover over the DIV itself

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a DIV that opens up when an image is hovered. When the user leaves the image, the div disappears after a timeout. How can I make it so that the DIV will stay active if the user was to hover over the DIV itself? So the DIV will stay active as long as the user is on the image or the DIV itself… >>> More
jquery hover not working in safari and chrome

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm developing a site and I am implementing a jquery hover effect on some list items. It works perfectly in all browser except safari and chrome (mac and pc). For some reason the hover effect doesnt work on those to browsers. Here is the link link text I thought I would add the code just in case… >>> More
Twitter Bootstrap styling conflicts with plug-ins like jqGrid and other third part libraries

as seen on Geeks with Blogs - Search for 'Geeks with Blogs'
Issues:The concern is that the Twitter Bootstrap framework is that some of their css selectors are simply too generic and have incompatibility issues and conflicts with most third party plug-ins and css libraries, like jQuery-UI and jqGrid.My most pressing concern is only with the generic selector… >>> More