Hover 2 elementen do x anders niets

Door Wouter De Schuyter op 15-03-2009 13:17

315 views

Hoi,
Is het mogelijk om bv de background van 2 elementen te veranderen wanneer je hovert over beide elementen?
Dus wanneer je over het ene hovert en niet het andere mag er nix gebeuren..

Waarom heb ik dit nodig? Omdat wanneer je in het 2de "level" van het menu komt blijft li dus op hover staan de background wordt dus getoond van li wat niet mag..

Pieter van Linschoten

15-03-2009 13:53

Wat gebruik je nu om bij 1 element de achtergrond te veranderen?

Welke combinatie van css en javascript? (bv. framework of losse functie of enkel css?)
Hoe roep je ze aan? (bv. hover of onmouseover)

Wouter De Schuyter

15-03-2009 16:48

.nav li {
	display: block;
	margin: 0  7px 0 7px;
	background: url('../img/layout/buttonBg.png') right top no-repeat;
	float: left;
	font-weight: normal;
	font-style: normal;
	cursor: pointer;
}

.nav li:hover {
	background: url('../img/layout/buttonBgH.png') right top no-repeat;
	color: #000;
}

.nav li a {
	display: block;
	padding: 2px 3px 4px 6px;
	margin: 0 5px 0 0;
	background: url('../img/layout/buttonBg.png') left top no-repeat;
	text-decoration: none;
}

.nav li a:hover {
	background: url('../img/layout/buttonBgH.png') left top no-repeat;
	color: #000;
}

Ik kan niet echt met javascript werken :/.. Nu is het puur css

Pieter van Linschoten

15-03-2009 23:05

Ik denk dat je bij dit toch echt javascript nodig zal hebben.

Dit is er eentje die ik gebruik.


function MM_changeProp(objId,x,theProp,theValue) {
  var obj = null; with (document){ if (getElementById)
  obj = getElementById(objId); }
  if (obj){
    if (theValue == true || theValue == false)
      eval("obj.style."+theProp+"="+theValue);
    else eval("obj.style."+theProp+"='"+theValue+"'");
  }
}

Maar dan zal je flinke lijsten krijgen met onmouseover en onmouseout.

Zelf heb ik daar in php weer een functie voor gemaakt, die automatisch die links genereerd.

Reageren

Inloggen om te reageren