[CSS]Probleem met mouseover en mouseout

[mistercash]

Ik ben een website aan het maken met een kalender per maand.

Nu is er per dag afhankelijk als er een reservatie is een vakje met een border.
Afhankelijk als het die dag begint zal het een vakje zijn met vanboven,link en rechts een border.
Eindigt hij dan zal de bottom,rechts en links een border hebben.
Hierdoor kun je makkelijk een overzicht zien van wanneer tot wanneer een reservatie duurt.

Heb dit in PHP gedaan en afhankelijk van een voorwaarde zet ik in de <td> tag class=begin of class=end.

Nu wil ik dat als over de cel gegaan wordt dat er een handje opkomt.
Ok geen probleem deze tag erbij in de <td>
onMouseOver="this.className='linkin'" onmouseout="this.className='linkout'"
CSS ziet er dan dus zo uit:

code:

/* CSS Document */
.begin
{
    border-top:solid;
    border-top-color:#000066;
    border-top-width:thin;
    
    border-left:solid;
    border-left-color:#000066;
    border-left-width:thin;
    
    border-right:solid;
    border-right-color:#000066;
    border-right-width:thin;
}

.middle
{
    border-left:solid;
    border-left-color:#000066;
    border-left-width:thin;
    
    border-right:solid;
    border-right-color:#000066;
    border-right-width:thin;
}

.end
{
    border-bottom:solid;
    border-bottom-color:#000066;
    border-bottom-width:thin;
    
    border-left:solid;
    border-left-color:#000066;
    border-left-width:thin;
    
    border-right:solid;
    border-right-color:#000066;
    border-right-width:thin;
}

.startend
{
    border-top:solid;
    border-top-color:#000066;
    border-top-width:thin;
    
    border-bottom:solid;
    border-bottom-color:#000066;
    border-bottom-width:thin;
    
    border-left:solid;
    border-left-color:#000066;
    border-left-width:thin;
    
    border-right:solid;
    border-right-color:#000066;
    border-right-width:thin;
}

.linkout
{
    cursor:default;
}

.linkin
{
    cursor:pointer;
}

Nu de borders worden juist weergegeven.
NU is het probleem als ik met mijn cursor over een cel ga dat hij de borders wegdoet.
Ik kan wel begrijpen waarom dit komt dit is namelijk omdat in de .linkin alleen maar een cursor attribuut staat en die van de borders niet.

Weet iemand hoe ik dit het beste oplos?

[Joshua]

Weet het niet zeker en heb er geen ervaring mee, maar ik denk dat hij dat stukje dan als een "link" ziet dus misschien zou je eens de tag <a> in je .css kunnen opnemen

[code]
a {
border: 1px;
}
[/css]

[ Voor 21% gewijzigd door Joshua op 01-07-2006 16:36 ]

[Verwijderd]

Ik weet niet of ik je goed begrijp, maar waarom verander je de muis cursor van een element als je met de muis er vanaf gaat? Dat zie je dan toch niet? Kan toch gewoon zo:

Cascading Stylesheet:

.begin, .middle, .end, .startend 
{
    cursor:pointer; 
    border-width: thin;
    border-color: #000066;
    border-style: solid;
}

.begin
{
border-bottom-width: none;
}

.middle
{
border-top-width: none;
border-bottom-width: none
}

.end
{
border-top-width: none;
}

Gelijk je css iets korter

[mistercash]

OK is opgelost hierdoor.

Nu ja voor dit probleem, maar nu heb ik de vraag wat als ik nu wil dat de backcolor verandert van kleur als je erover gaat.
Dus dat dan eigenlijk de mouseover nog gebruikt moet worden.
Moet je dan voor iedere mogelijke combinatie dan een css maken voor die mouseover?
Ja bedoel zodat die borders niet verdwijnen.

Is er niets zoiets als geneste css'en?

[Sendy]

css is "cascading", opgestapeld dus.

Je kan meerdere klassen aan 1 element geven: class="begin highlight" o.i.d.

[mistercash]

Ok, bedankt allemaal voor de vlugge respons.
Dan mag het topic gesloten worden.