Border runt en länk på mouse over

Det kan man säkert, men går det inte lika bra med enbart CSS ;) ?

[s]a {border:1px solid transparent}
a:hover {border:1px solid blue}[/s]
/* uppdaterat - man skall visst testa innan man skriver :r */
a {display:inline-block;border:1px solid white}
a:hover {border:1px solid blue}

Bordern på <a> är med för att länken garanterat inte skall "hoppa" när markören kommer över den ;)

Borde man inte kunna göra så här? Det fungerar inte för mig med hover.

<style type="text/css">
<!--
.test {border:1px solid transparent;}
.test:hover {border:1px solid blue;}
.test:active {background: #111;}
-->
</style>

<a class="test" href="">fdsf</a>

Skulle du absolut vilja ha använda onmouseover på en bild ser det ut så här:

 
<img onmouseover="this.style.border='1px solid blue'; " onmouseout="this.style.border='1px solid transparent'; " style="border: 1px solid transparent;" src=... />

Detta gör precis samma sak som järvklos CSS, men dock bara på bilden, och inte på ev text bredvid bilden, inom a-taggarna.

mattiasnordin skrev:

Borde man inte kunna göra så här? Det fungerar inte för mig med hover.

<style type="text/css">
<!--
.test {border:1px solid transparent;}
.test:hover {border:1px solid blue;}
.test:active {background: #111;}
-->
</style>

<a class="test" href="">fdsf</a>

Jo det borde man, men Internet Explorer bojkottar den syntaxen :bla . (Däremot ska det funka utmärkt i Mozilla och Opera)

Man ska som järvklo säger testa sin kod... Kolla jojoxx inlägg ovan. IE verkar för övrigt bara bojkotta den koden för andra objekt än A. (Jag trodde innan jag hade testat att det inte gick att definiera hover till klassdefinitioner i IE)

:r
Jag hade fel ovan... Man måste tydligen lägga på display:inline-block för att det skall fungera (+ att transparent som färg tydligen inte är så bra på länkar om man vill ha kontroll)...

Har ändrat exemplet nu ;)!

Får det fortfarande inte att fungera. Har MsIE 6.0.

<style type="text/css">
<!--
.test {display:inline-block;border:1px white;}
.test:hover {border:1px solid blue;}
-->
</style>

<a class="test">fdsfds</a>

a.test {
  display:inline-block;
  border:1px solid white;
}
a.test:hover {border:1px solid blue}

funkar för mig i MSIE ;)

Jo det borde man, men Internet Explorer bojkottar den syntaxen . (Däremot ska det funka utmärkt i Mozilla och Opera)

Kanske ska läsa också... Jag kör javascript varianten istället. Längre kod, men fungerar :)

mattiasnordin skrev:

.test {display:inline-block;border:1px solid white;}

Du glömde solid där, om du nu undrar. :)
Men jag skulle ändå kör javascript-varianten.

Ash då... my bad...

Man var tvungen att ha med href="#" i länken för att det skulle fungera.

Min "länk" såg ut så här:

<a class="test"  onClick="set_path_form.selected_path_and_file.value='<%=Replace(objFolder.path, "\", "/")%>/<%=objFile.Name%>'"><%=objFile.Name%></a>

Ny fråga. Går det att få till "mouse over/hover" funktionen med CSS på en <a>blaj</a> tag ?

mattiasnordin skrev:

Ny fråga. Går det att få till "mouse over/hover" funktionen med CSS på en <a>blaj</a> tag ?

Du menar annorlunda än såhär §e

Beror på vad du vill göra ;)
Du kan använda all CSS du kan tänka dig och fortfarande få det att fungera i de flesta webbläsarna, men vill du fnula in javascript-funktioner via CSS så är den mekanismen (behaviours) högst MSIE-specifik... :birp

Jag tycker att lösningen i inlägg #856546 är bra. Men jag vill ta bort href="#" från <a...> taggen.

Då fungerar inte hover i exemplet ovan. Föredrar helt klart att använda CSS.

Varför vill du ha bort href="#"?

Hmm
Har du testat den här: http://dean.edwards.name/IE7/

dean försöker ju få MSIE att "bli som folk" (dvs funka som standard) via sitt "IE7"-behaviour ;)

Web-Tor skrev:

Varför vill du ha bort href="#"?

har den funderingen med? :q

Varför vill du ha bort href="#"?

Jag vill inte att sidan ska laddas om.

Man kanske ska använda något annat än ett <a> objekt om det inte ska användas som en länk... :q

Jag vill inte att sidan ska laddas om.

Det gör den väl ändå inte?

Jag vill inte att sidan ska laddas om.

Lägg till return false; sist i ditt onclick-attribut. ;)

Det gör den väl ändå inte?

Jo, href="#" laddar om sidan och letar efter ett "a name" som inte är definierat (om jag inte har fått det om bakfoten).