webForumDet fria alternativet

onmouseover + css

2 svar · 364 visningar · startad av Qonny

QonnyMedlem sedan mars 200611 inlägg
#1

Hallojsan! Har försökt ett par dar att få 4 st textboxar i en container att ändra färg när man onmouseover.. det jag vill är att samtliga textboxar ska ändra färg när man kör onmouseover på containern. Går det?

html ser ut så här:

<a href="#">
<div id="container" onMouseOver="this.style.cursor='pointer'; return overlib('<b>overlibinfo</b>'); " onMouseOut="return nd();">

<div id="box1"onMouseOver="this.className='hover1';" onMouseOut="this.className='text1';">info1</div>
<div id="box2"onMouseOver="this.className='hover1';" onMouseOut="this.className='text1';">info2</div>
<div id="box3"onMouseOver="this.className='hover1';" onMouseOut="this.className='text1';"><b>info3</b></div>
<div id="box4"onMouseOver="this.className='hover1';" onMouseOut="this.className='text1';"><b>info4</b></div>

</div>
</a>

css:

#list1{ width:430px; height:auto; margin-left:auto; margin-right:auto; margin-top: 6px; float:left; background-color:#8c94a0;font-family:arial; font-family:tahoma; font-size:10px; color:#ccccff; text-align:left; text-decoration:none;}
#box1{ width:365px; margin-left:2px; margin-bottom:4px; margin-top:4px; float:left;}
#box2{width:55px; margin-right:2px; margin-bottom:4px; margin-top:4px; float:right;text-align:right;}
#box3{width:380px; margin-left:2px; margin-bottom:2px; float:left;}
#box4{width:40px; margin-right:2px; margin-bottom:2px; float:right; text-align:right;}
.hover1{color:#ff6600; text-decoration:none;}
.text1{color:#ccccff; text-decoration:none;}

Som Ni ser så har jag gjor onmouseover i varje box... det funkar fast det blir lite missvisande när hela containern är länkad.

FuelMedlem sedan okt. 20001 285 inlägg
#2

hmm.. du kanske kunde räkna alla med den klassen

var boxes = document.getElementsByClassName('boxclass');
for (i = 1; i <= boxes; i++){
document.getElementById('box_' + i).className = 'newclass';
}

Edit: glömde..

document.getElementsByClassName = function getElementsByClassName(classname) 
{ 
	var arr = new Array(); 
	var elems = document.getElementsByTagName("*");
	for ( var cls, i = 0; ( elem = elems[i] ); i++ )
	{
		if ( elem.className == classname )
		{
			arr[arr.length] = elem;
		}
	}
	return arr;
}
QonnyMedlem sedan mars 200611 inlägg
#3

skulle behöva lite mer hjälp... kan nämligen ingenting av Java... så jag fattar nada, så kanske det går att få det lite mer utformligare.... :r

132 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
130 ms — hämta tråd, inlägg och bilagor (db)