Archief - :hover in IE

Enigma² · 1 jul 2008

ik heb een menu in tabelvorm, met submenu voor 1 item dat door volgend script wordt gestuurd :

Code:

<script>

function expand(s, m)
{
   var browser = window.navigator.appName;
   var dif = 0;
   if (browser != "Microsoft Internet Explorer") { dif = 12; }

   var d = document.getElementById(m);
   var td = document.getElementById(s);
   var left = td.offsetLeft;
   var top = td.offsetTop + 25;
   var width = td.offsetWidth - dif;

   td.style.color = "black";
   td.style.backgroundColor = "#EEEEEE";

   d.style.top = top;
   d.style.left = left;
   d.style.width = width;
   d.style.position = "absolute";
   d.style.visibility = "visible";
   d.style.display = "block";
}

function collapse(s, m)
{
   var d = document.getElementById(m);
   var td = document.getElementById(s);

   td.style.color = "white";
   td.style.backgroundColor = "white";

   d.style.position = "static";
   d.style.visibility = "hidden";
   d.style.display = "none";
}

function collapseAll()
{
   var menuDiv = document.getElementById("menu");
   var divs = menuDiv.getElementsByTagName("div");
   var div;

   for (i = 0; i < divs.length; i++)
   {
      div = divs[i];
      div.style.visibility = "hidden";
      div.style.display = "none";
   }
}
</script>

het menu ziet er als volgt uit :

Code:

<div id="menu" onmouseout="javascript:collapseAll();">
<table class="menu2" border="0" id="navBar" width="100%">
<tr>
<td><a href="x.htm">x</a></td>
<td><a href="y.htm">y</a></td>
<td class="button" width="20%" valign="top" id="item3" onmouseover="expand(this.id, 'menu3');" onmouseout="collapse(this.id, 'menu3');">
<a href="z.htm"><p>z</p></a>
<div id="menu3" class="exp" onmouseout="collapse('item3', this.id);">
<p class="button"><a href="a.htm" class="menuitem">A</a></p>
<p class="button"><a href="b.htm" class="menuitem">B</a></p>
</div></td>
<td><a href="u.htm">u</a></td>
<td><a href="v.htm">v</a></td>
<td><a href="w.htm">w</a></td>
</tr></table></div>

mijn css ziet er als volgt uit

Code:

.menu2 td:hover {color:#FFFFFF;background-color:#9b6f41;}
a {color:#9b6f41;text-decoration: none;}

.menu2{position : absolute;top:174px;left:64px;width:565px;font-size:11pt;text-align:center;}
.menu2 td:hover a{color:white;}


P
{padding-top: 0px;
margin: 0;}

td.button
{
color: black ;
background: white ;
border: 0px solid #CCCCCC;
margin: 0px;
padding: 0px;
}

div.exp
{
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
font-weight: bold;
background-color = #FFFFFF;
border = 1px solid #FFFFFF;
margin-top:0px;
margin-left:0px;
}

p.button
{
color: #9b6f41 ;
background: #ebe2d9 ;
border: 1px solid #CCCCCC;
margin: 0px;
padding: 0px;
display: block ;
}

a.menuitem:link
{
text-decoration: none ;
color: #9b6f41; ;
background: #ebe2d9 ;
display: block ;
}

a.menuitem:visited
{
text-decoration: none ;
color: #9b6f41; ;
background: #ebe2d9 ;
display: block ;
}

a.menuitem:hover
{
text-decoration: none ;
color: #FFFFFF ;
background: #9b6f41 ;
display: block ;
}

a.menuitem:active
{
text-decoration: none ;
color: #FFFFFF ;
background: #9b6f41 ;
display: block ;
}

in IE7 werkt dit perfect, maar in langere versies van IE werkt de hover niet en verdwijnt het submenu als je let je muis van het eerste naar het tweede submenu probeert te gaan

hoe los ik deze 2 problemen op ?

RpR · 1 jul 2008

IE6 ondersteunde geen hover op bepaalde element maar was op te lossen met javascript onmouseover

Enigma² · 1 jul 2008

RpR zei:
IE6 ondersteunde geen hover op bepaalde element maar was op te lossen met javascript onmouseover

ja klopt, maar op de knoppen waar een submenu is, is dat niet van toepassing.De javascript voor het submenu zorgt ook voor een hover-effect, maar dan alleen voor de achtergrond.De tekstkleur blijft hetzelfde (wellicht omdat ik in de css een kleur aan a{} heb gegeven;Anders was dit het gekende blauw). Dus hoe kan ik dit oplossen door mijn huidige javascript aan te passen?

Bram · 1 jul 2008

Probeer eens suckerfish dropdowns ofzo (google it), die werken overal... Of anders mss gebruik maken van een lightweight JS framework dat dit soort bugs beter opvangt?

Enigma² · 1 jul 2008

SveltestSword zei:
Probeer eens suckerfish dropdowns ofzo (google it), die werken overal... Of anders mss gebruik maken van een lightweight JS framework dat dit soort bugs beter opvangt?

dat heb ik opgezocht en zoals gezegd kleurt enkel de achtergrond en verdwijnt het submenu als ge van de eerste cel naar een andere gaat. Kan je geen fout in mijn code vinden?

Enigma² · 2 jul 2008

ik heb het menu nu opnieuw gemaakt, maar dan met ul/li ipv tabellen. Het blijkt nu te werken, met een of andere JS erbij.

Een stomme vraag mss, maar hoe kan ik de (horizontale) lijst een totale breedte meegeven, waarbij de lijst elementen hun breedte bepaald worden door de lengte van de letters en dus niet noodzakelijk allemaal gelijk zijn

Enigma² · 3 jul 2008

Enigma² zei:
ik heb het menu nu opnieuw gemaakt, maar dan met ul/li ipv tabellen. Het blijkt nu te werken, met een of andere JS erbij.

Een stomme vraag mss, maar hoe kan ik de (horizontale) lijst een totale breedte meegeven, waarbij de lijst elementen hun breedte bepaald worden door de lengte van de letters en dus niet noodzakelijk allemaal gelijk zijn

niemand die een antwoord weet?
als je de vergelijking maakt met tabellen: daar is de breedte van elke cel afhankelijk van de letters die erin staan en niet van de totale breedte.Bij een lijst heeft elk element dezelfde lengte

Enigma² · 4 jul 2008

hieronder staat mijn css voor het menu.In IE6 werkt de hover bij het submenu wél, maar bij het vaste menu niet (de background alleszinds niet). Waar zit de fout dan ergens, want dit is toch zeer vreemd.De tekstkleur kan ik wel laten hoveren,maar de achtergrond lukt niet.Ook de submenu's werken perfect in IE ouder dan de 7.

Code:

#nav {position : absolute;
		 	top:178px;
			left:67px;
			font-size:11pt;
			text-align:center;
			width:700px;
}

#nav a {
	font-weight: ;
	color: #9b6f41;

}

#nav li li a {
	display: block;
	font-weight: normal;
	color: #9b6f41;
	padding: ;
}

#nav li a {
	display: block;
	font-weight: normal;
	color: #9b6f41;
	padding: ;
}

#nav li a:hover {
	padding:0px ;
	border:0px ;
	border-width:0px ;
	background-color:#9b6f41;
	color:white;
}

#nav li li a:hover {
	padding:0px ;
	border:0px ;
	border-width:0px ;
	background-color:#9b6f41;
	color:white;
}

li {
	float: left;
	position: relative;
	text-align: center;
	cursor: default;
	background-color: white;
	color:#9b6f41;
	border: ;
	border-width:;
}

li ul {
	display: none;
	position: absolute;
	top: 100%;
	left:0px ;

	font-weight: normal;
	background: white;
	padding: ;
	border-right: ;
}

li>ul {
	top: auto;
	left: 0px;
}

li li {
	display: block;
	float: none;
	background-color: transparent;
	border: 0;
}

li:hover ul, li.over ul {
	display: block;
}

li#normaal{width:105px;}
li#normaal li{width:105px;}
li#normaal a:hover{background-color:#9b6f41;}
li#normaal li a:hover{background-color:#9b6f41;}
li#groter{width:150px;}
li#groter li{width:150px;}
li#groter a:hover{background-color:#9b6f41;}
li#groter li a:hover{background-color:#9b6f41;}

n00bslayer · 4 jul 2008

Je hebt volgens mij een probleem met de overerving in je css. De laatste selectors wegen niet zoveel door als jouw eerste declaraties. waardoor je background niet overschreven wordt zoals je wil. li#id < #id li. Zie uitleg.

Kopieer eens de code van deze pagina, en bewerk ze tot je het menu helemaal naar je zin hebt. Je zal het hier volgens mij veel gemakkelijker mee hebben om op door te werken.

En een online voorbeeldje is nog zo gemakkelijk eigenlijk.

Enigma² · 4 jul 2008

oplossing te vinden op : http://csscreator.com/node/28083

het probleem ligt bij display:block.Gewoon width:100% en height :100% toevoegen en het werkt

Archief - :hover in IE

Enigma²

Legacy Member

RpR

Legacy Member

Enigma²

Legacy Member

Bram

Legacy Member

Enigma²

Legacy Member

Enigma²

Legacy Member

Enigma²

Legacy Member

Enigma²

Legacy Member

n00bslayer

Legacy Member

Enigma²

Legacy Member