Hover not working in Google chrome

**jelly46** · 08-01-2011, 10:38 PM

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?

**JShor** · 08-01-2011, 11:05 PM

Please post some code so we can diagnose the problem.

**jelly46** · 08-17-2011, 04:17 PM

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>

**Deadweight** · 08-17-2011, 05:51 PM

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

**jelly46** · 08-18-2011, 09:47 AM

No not yet, only on my dev server.

**Deadweight** · 08-18-2011, 07:38 PM

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>

**jelly46** · 08-23-2011, 09:14 AM

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

Thanks though.

**XManBG** · 08-24-2011, 06:01 PM

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

**jelly46** · 10-21-2011, 11:13 AM

Thanks dude but it didn't work

Thread: Hover not working in Google chrome

Thread Tools

Search Thread

Hover not working in Google chrome

Quick answer

Bookmarks

Bookmarks

Posting Permissions