Results 1 to 9 of 9

Thread: Hover not working in Google chrome

  1. #1
    Join Date
    Jun 2010
    Posts
    45
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Hover not working in Google chrome

    Can someone tell if their rollovers are not working in google chrome?

    They work in IE and in FF but not in chrome.

    HAs anyone else dealt and tackled this problem?

  2. #2
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    557
    Thanks
    8
    Thanked 66 Times in 66 Posts

    Default

    Please post some code so we can diagnose the problem.

  3. #3
    Join Date
    Jun 2010
    Posts
    45
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hey man, sorry for that late reply.

    All i've tried has not worked

    Can you assist?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Custom Navigation</title>
    
    <style type="text/css">
    
    #wrapper{
    	width:1000px;
    	}
    
    #menu-outer { margin:0; padding:0;}
    
    #menu-inner { 
    width: 100%; 
    height: 85px; 
    padding:0!important;
    margin:0!important;
    background: url("nav_bar_bg.gif") no-repeat 45% 13px #fff !important; 
    }
    
    
    #menu-inner ul {list-style-type: none;}
    #menu-inner li {float: left; text-align: center; color:#00aeef; padding:0; margin:0; }
    
    map.main-menu {}
    
    .main-menu ul {}
    .main-menu ul li { }
    
    
    
    
    a.menu-link:link, a.menu-link:visited { color: #00aeef; text-decoration: none; display: block;}
    a.menu-link:hover, a.menu-link:active { color: #fff; background:url("nav_hover_bg.gif") repeat-x scroll transparent; text-decoration: none; display: block; }
    
    .fm-panel-title:link, .fm-panel-title:visited { color: #00aeef; text-decoration: none; display: block; width:85px;}
    .fm-panel-title:hover, .fm-panel-title:active { color: #fff; text-decoration: none; display: block; }
    
    
    a.menu-home:link, a.menu-home:visited{background:url("home_icon_big.gif") no-repeat scroll transparent; margin:15px -2px 0 -24px; padding:0; height:55px; width:55px;}
    a.menu-home:hover,a.menu-home:active{background:url("home_hover_big.gif") no-repeat scroll transparent; }
    
    .fn-panel-alpha a:link, .fn-panel-alpha a:visited{padding:8px 6px 13px 8px; margin-top:15px;  }
    .fn-panel-alpha a:hover, .fn-panel-alpha a:active{background:url("nav_hover_bg.gif") repeat-x scroll transparent; text-decoration: none; }
    
    .fn-panel-beta a:link, .fn-panel-beta a:visited{padding:8px 8px 13px 8px; margin-top:15px; }
    .fn-panel-beta a:hover, .fn-panel-beta a:active{background:url("nav_hover_bg_p_and_v.gif") repeat-x scroll transparent; }
    
    .fn-panel-gamma a:link, .fn-panel-gamma a:visited{padding:15px 10px 19px 7px; margin-top:15px;}
    .fn-panel-gamma a:hover, .fn-panel-gamma a:active{background:url("nav_hover_bg_teen.gif") repeat-x scroll transparent; }
    
    .fn-panel-delta a:link, .fn-panel-delta a:visited{padding:15px 10px 19px 7px; margin-top:15px;}
    .fn-panel-delta a:hover, .fn-panel-delta a:active{background:url("nav_hover_bg_children.gif") repeat-x scroll transparent; }
    
    .fn-panel-epsilon a:link, .fn-panel-epsilon a:visited{padding:8px 8px 13px 8px; margin-top:15px;}
    .fn-panel-epsilon a:hover, .fn-panel-epsilon a:active{background:url("nav_hover_bg.gif") repeat-x scroll transparent; }
    
    .fn-panel-zeta a:link, .fn-panel-zeta a:visited{padding:15px 10px 19px 7px; margin-top:15px; }
    .fn-panel-zeta a:hover, .fn-panel-zeta a:active{background:url("nav_hover_bg.gif") repeat-x scroll transparent; }
    
    .fn-panel-eta a:link, .fn-panel-eta a:visited{padding:8px 6px 13px 8px; margin-top:15px;}
    .fn-panel-eta a:hover, .fn-panel-eta a:active{background:url("nav_hover_bg.gif") repeat-x scroll transparent; }
    
    .fn-panel-theta a:link, .fn-panel-theta a:visited{padding:15px 10px 19px 7px; margin-top:15px;}
    .fn-panel-theta a:hover, .fn-panel-theta a:active{background:url("nav_hover_bg.gif") repeat-x scroll transparent; }
    
    .fn-panel-iota a:link, .fn-panel-iota a:visited{margin-top:15px; padding:14px 0 0 0; height:55px; width:101px; }
    .fn-panel-iota a:hover, .fn-panel-iota a:active{background:url("news_bg_tab_over.gif") no-repeat; }
    
    
    
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    <div id="menu-outer">
    	<div id="menu-inner">
       <map id="menu" class="main-menu">
        <ul>
        <li><a href="http://goshcc-cmsdev/" class="menu-link menu-home" title="Home"><span class="menu-outer"><span class="menu-inner">&nbsp</span></span></a></li>
        </ul>
    
        </map>
        <div id="&lt;One site top nav>" class="style-element-outer custom-menu custom-menu-&lt;One site top nav>"><div class="style-element-inner">
       <div class="style-element-body clear"><div class="footer-menu-panel fn-panel-alpha">
      <ul>
        <li class="fm-panel-title">
          <a href="/gen/news/medical-conditions/" class="fm-panel-title" title="Medical Conditions ">
            <span class="fm-panel-title">Medical Conditions </span>
          </a>
        </li>
    
      </ul>
    </div><div class="footer-menu-panel fn-panel-beta">
      <ul>
        <li class="fm-panel-title">
          <a href="/gen/news/parents-and-visitors/" class="fm-panel-title" title="Parents and Visitors ">
            <span class="fm-panel-title">Parents and Visitors </span>
          </a>
        </li>
      </ul>
    
    </div><div class="footer-menu-panel fn-panel-gamma">
      <ul>
        <li class="fm-panel-title">
          <a href="/gen/news/directions-map-and-parking/" class="fm-panel-title" title="Teenagers ">
            <span class="fm-panel-title">Teenagers </span>
          </a>
        </li>
      </ul>
    </div><div class="footer-menu-panel fn-panel-delta">
    
      <ul>
        <li class="fm-panel-title">
          <a href="/gen/news/renal-failure-stories/" class="fm-panel-title" title="Childrens">
            <span class="fm-panel-title">Childrens</span>
          </a>
        </li>
      </ul>
    </div><div class="footer-menu-panel fn-panel-epsilon">
      <ul>
    
        <li class="fm-panel-title">
          <a href="/gen/news/search/" class="fm-panel-title" title="Health Proffesionals ">
            <span class="fm-panel-title">Health Proffesionals </span>
          </a>
        </li>
      </ul>
    </div><div class="footer-menu-panel fn-panel-zeta">
      <ul>
        <li class="fm-panel-title">
    
          <a href="/gen/news/christou-test-page/" class="fm-panel-title" title="About Us">
            <span class="fm-panel-title">About Us</span>
          </a>
        </li>
      </ul>
    </div><div class="footer-menu-panel fn-panel-eta">
      <ul>
        <li class="fm-panel-title">
          <a href="/gen/news/parents-and-visitors/" class="fm-panel-title" title="Research and innvoation">
    
            <span class="fm-panel-title">Research and innvoation</span>
          </a>
        </li>
      </ul>
    </div><div class="footer-menu-panel fn-panel-theta">
      <ul>
        <li class="fm-panel-title">
          <a href="/gen/news/parents-and-visitors/" class="fm-panel-title" title="Working here">
            <span class="fm-panel-title">Working here</span>
    
          </a>
        </li>
      </ul>
    </div><div class="footer-menu-panel fn-panel-iota">
      <ul>
        <li class="fm-panel-title">
          <a href="/gen/news/medical-conditions/" class="fm-panel-title" title="News">
            <span class="fm-panel-title">News</span>
          </a>
    
        </li>
      </ul>
    </div></div></div></div></div></div>
    
    </div>
    
    
    </body>
    </html>

  4. #4
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    512
    Thanks
    9
    Thanked 61 Times in 59 Posts

    Default

    Quick question. Do you have this currently up on a website?

  5. #5
    Join Date
    Jun 2010
    Posts
    45
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    No not yet, only on my dev server.

  6. #6
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    512
    Thanks
    9
    Thanked 61 Times in 59 Posts

    Default

    Ok this works in chrome. Its like a color hack:
    add this to the head
    Code:
        function changeColor(idObj,colorObj)
        {
            document.getElementById(idObj.id).style.color = colorObj;
    
        }
        </script>
    Replace your links with:
    Code:
    <div id="wrapper">
    <div id="menu-outer">
    	<div id="menu-inner">
       <map id="menu" class="main-menu">
        <ul>
        <li><a href="http://goshcc-cmsdev/" class="menu-link menu-home" title="Home"><span class="menu-outer"><span class="menu-inner">&nbsp</span></span></a></li>
        </ul>
    
        </map>
        <div id="&lt;One site top nav>" class="style-element-outer custom-menu custom-menu-&lt;One site top nav>"><div class="style-element-inner">
       <div class="style-element-body clear"><div class="footer-menu-panel fn-panel-alpha">
      <ul>
        <li class="fm-panel-title">
          <a href="/gen/news/medical-conditions/" class="fm-panel-title" title="Medical Conditions " id="t2" onmouseover="changeColor(this,'#FFF');"
            onmouseout="changeColor(this,'#00aeef');">
            <span class="fm-panel-title">Medical Conditions </span>
          </a>
        </li>
    
      </ul>
    </div><div class="footer-menu-panel fn-panel-beta">
      <ul>
        <li class="fm-panel-title">
          <a href="/gen/news/parents-and-visitors/" class="fm-panel-title" title="Parents and Visitors" id="t1" onmouseover="changeColor(this,'#FFF');"
            onmouseout="changeColor(this,'#00aeef');">
            <span class="fm-panel-title">Parents and Visitors </span>
          </a>
        </li>
      </ul>
    
    </div><div class="footer-menu-panel fn-panel-gamma">
      <ul>
        <li class="fm-panel-title">
          <a href="/gen/news/directions-map-and-parking/" class="fm-panel-title" title="Teenagers" id="t3" onmouseover="changeColor(this,'#FFF');"
            onmouseout="changeColor(this,'#00aeef');">
            <span class="fm-panel-title">Teenagers </span>
          </a>
        </li>
      </ul>
    </div><div class="footer-menu-panel fn-panel-delta">
    
      <ul>
        <li class="fm-panel-title">
          <a href="/gen/news/renal-failure-stories/" class="fm-panel-title" title="Childrens" id="t4" onmouseover="changeColor(this,'#FFF');"
            onmouseout="changeColor(this,'#00aeef');">
            <span class="fm-panel-title">Childrens</span>
          </a>
        </li>
      </ul>
    </div><div class="footer-menu-panel fn-panel-epsilon">
      <ul>
    
        <li class="fm-panel-title">
          <a href="/gen/news/search/" class="fm-panel-title" title="Health Proffesionals" id="t5" onmouseover="changeColor(this,'#FFF');"
            onmouseout="changeColor(this,'#00aeef');">
            <span class="fm-panel-title">Health Proffesionals </span>
          </a>
        </li>
      </ul>
    </div><div class="footer-menu-panel fn-panel-zeta">
      <ul>
        <li class="fm-panel-title">
    
          <a href="/gen/news/christou-test-page/" class="fm-panel-title" title="About Us" id="t6" onmouseover="changeColor(this,'#FFF');"
            onmouseout="changeColor(this,'#00aeef');">
            <span class="fm-panel-title">About Us</span>
          </a>
        </li>
      </ul>
    </div><div class="footer-menu-panel fn-panel-eta">
      <ul>
        <li class="fm-panel-title">
          <a href="/gen/news/parents-and-visitors/" class="fm-panel-title" title="Research and innvoation" id="t7" onmouseover="changeColor(this,'#FFF');"
            onmouseout="changeColor(this,'#00aeef');">
    
            <span class="fm-panel-title">Research and innvoation</span>
          </a>
        </li>
      </ul>
    </div><div class="footer-menu-panel fn-panel-theta">
      <ul>
        <li class="fm-panel-title">
          <a href="/gen/news/parents-and-visitors/" class="fm-panel-title" title="Working here" id="t9" onmouseover="changeColor(this,'#FFF');"
            onmouseout="changeColor(this,'#00aeef');">
            <span class="fm-panel-title">Working here</span>
    
          </a>
        </li>
      </ul>
    </div><div class="footer-menu-panel fn-panel-iota">
      <ul>
        <li class="fm-panel-title">
          <a href="/gen/news/medical-conditions/" class="fm-panel-title" title="News" id="t8" onmouseover="changeColor(this,'#FFF');"
            onmouseout="changeColor(this,'#00aeef');">
            <span class="fm-panel-title">News</span>
          </a>
    
        </li>
      </ul>
    </div></div></div></div></div></div>
    
    </div>

  7. #7
    Join Date
    Jun 2010
    Posts
    45
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I cant change the links as it part of a CMS and i dont have access to the files i need.

    Thanks though.

  8. #8
    Join Date
    Aug 2011
    Location
    both, Germany and Bulgaria
    Posts
    54
    Thanks
    14
    Thanked 10 Times in 10 Posts

    Thumbs up Quick answer

    Hi there,

    of course Chrom do understand the :hover selector. So the question is, why doesn't Chrom do it over your page?!

    At the first look I was confused, how many complicated classes and IDs were used here. Anyway, theoretically that's not the problem, although using multiple classes in older browsers will become a problem ...

    The one, which has surprised me, was the overstyling of the <li><a><span> tags. They all are from the class "fm-panel-title". At least for the <li> you don't need it, and after removing that class there, Chrome renders your page correctly too (see attached file, and try out after renaming it).

    Cheers

  9. #9
    Join Date
    Jun 2010
    Posts
    45
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks dude but it didn't work

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •