Ny border-color vid OnMouseOver?

Tråden skapades och har fått 9 svar. Det senaste inlägget skrevs .
1
  • Medlem
  • Neverland
  • 2005-06-23 09:26

Jag behöver snabbhjälp!

Går det att byta border-color vid OnMousOver?
I så fall - vad skriver jag i html- och css-mallen?

Det borde väl bara vara att skriva, typ detta i css'n:

#dindiv a {
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
border-width: 1px;
}

#dindiv a:hover {
border-top: 1px solid #999999;
border-right: 1px solid #999999;
border-left: 1px solid #999999;
border-bottom: 1px solid #999999;
border-width: 1px;
}

/John

  • Medlem
  • Neverland
  • 2005-06-23 10:41

Guld! Tack för hjälpen.

Jag ska testa också.

  • Medlem
  • Mölndal
  • 2005-06-23 10:57

Finns någon anledning att skriva ut varje enskild border-sida? Tycker det borde räcka med kortformen

border: 1px solid #ffffff;

  • Medlem
  • Varberg
  • 2005-06-23 11:03
Ursprungligen av memark:

Finns någon anledning att skriva ut varje enskild border-sida? Tycker det borde räcka med kortformen

border: 1px solid #ffffff;

Ja, det räcker. Om man vill förkorta ännu mer räcker det med #fff istället för #ffffff.

Ursprungligen av memark:

Finns någon anledning att skriva ut varje enskild border-sida? Tycker det borde räcka med kortformen

border: 1px solid #ffffff;

Exakt, det räcker! Jag var lite lat och kopierade en gammal grej jag hade!

/John

  • Medlem
  • Neverland
  • 2005-06-23 11:47

Nu har jag testat. Men det verkar vara lite si och så med placeringen.

#ruta1 a {
border: 1px solid #000000|000000;
border-width: 1px;
}

#ruta1 a:hover {
border: 1px solid #FFFFFF;
border-width: 1px;
}
<div id="ruta1" style="position: absolute; left: 10px; top: 10px; width: 20px; height:20 px; z-index:20;">
<a href="#"><img src="0.gif" width="20" height="20" border="0"></a>
</div>

<div id="bgr" style="position: absolute; left: 10px; top: 10px; width:20px; height: 20px; z-index:10;">
<a href="#"><img src="1.gif" width="20" height="20" border="0"></a>
</div>
  • Medlem
  • 2005-06-23 12:02

Vill du ha mouse-over på bilden eller på div-taggen bilden ligger i?
I CSS-definitionen har du angett 'a', men lagt referensen i en div-tagg. Kan vara det som ställer till det.

  • Oregistrerad
  • 2005-06-23 12:02
Ursprungligen av filuren:

Nu har jag testat. Men det verkar vara lite si och så med placeringen.

Prova det här istället:

#ruta1,#ruta1:hover{
border: 1px solid #000000;
position: absolute;
left: 10px;
top: 10px;
width: 20px;
height:20px;
display:block;
}

#ruta1:hover{
border: 1px solid #ffffff;
}
<a id="ruta1" href="#"><img src="0.gif" width="20" height="20" border="0"></a>

Varför hade du förresten två element som du placerade OVANPÅ varandra?

  • Medlem
  • Neverland
  • 2005-06-23 13:08
Ursprungligen av svinto_deluxe:

Varför hade du förresten två element som du placerade OVANPÅ varandra?

För att jag ville kolla att placeringen blev rätt.
(Och tur var väl det, eftersom jag knasade till det.)

Nu funkar det som tänkt. Stort tack och trevlig midsommar på er alla!

1
Bevaka tråden