Log in

View Full Version : 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? :confused:



<!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

function changeColor(idObj,colorObj)
{
document.getElementById(idObj.id).style.color = colorObj;

}
</script>


Replace your links with:

<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