[CSS] Class kan elementdefinities niet overriden? - Softwareontwikkeling

donderdag 5 juli 2007 10:30

Acties:

Topicstarter

Omdat IE geen :hover ondersteunt geef ik met behulp van JS bepaalde elementen de class .hover als ze gehovered worden. Het punt is alleen dat ik de styledefinities die vooraf aan de elementen toegekend worden niet kan overriden met die class. Voorbeeldje:

Cascading Stylesheet:

div
{
  background-color:red;
}
div.hover
{
  background-color:green;
}

De div blijft dan gewoon rood. Gebruik ik in plaats van div.hover div:hover, dan werkt het wel, maar dat pakt IE dus niet. Is er een manier om dit werkend te krijgen zonder met JS de styles direct te moeten overriden?

donderdag 5 juli 2007 10:51

Acties:

Cartman!

Zelf gebruik ik altijd mootools en doe ik onmouseover de functie this.addClass('hover'); en onmouseout de functie this.removeClass('hover'). Heeft tot nu toe altijd prima gewerkt.

donderdag 5 juli 2007 10:56

Acties:

remcotolsma

Je moet elementen niet de de class '.hover' geven, maar gewoon 'hover' (zonder punt

). Class selectors kunnen element selector in CSS prima overriden. Dus het stukje CSS wat jij geeft zou prima moeten werken. Waarschijnlijk zit de fout in het javascript.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Test</title>

    <style type="text/css">
      div {
        background: #F00;
      }
      
      div.hover {
        background: #0F0;
      }
    </style>
  </head>

  <body>
    <div>div</div>
    <div class="hover">div.hover</div>
  </body>
</html>

donderdag 5 juli 2007 10:56

Acties:

Verwijderd

Waarom switch je classes? waarom verander je niet gewoon element.style.backgroundColor?

donderdag 5 juli 2007 11:00

Acties:

crisp

Devver

Pixelated

Mei schreef op donderdag 05 juli 2007 @ 10:30:
Omdat IE geen :hover ondersteunt[...]

IE7 wel hoor. Als het puur een stylistische kwestie is zou ik eerst voor mezelf nagaan of je wel extra moeite zou moeten doen voor IE < 7.

Intentionally left blank

donderdag 5 juli 2007 11:03

Acties:

--MeAngry--

aka Qonstrukt

Verwijderd schreef op donderdag 05 juli 2007 @ 10:56:
Waarom switch je classes? waarom verander je niet gewoon element.style.backgroundColor?

Waarom niet? Styledefinities moet je niet door je Javascripts heen gaan gooien, hoe wil je ze namelijk ooit terugvinden?

Tesla Model Y RWD (2024)

donderdag 5 juli 2007 11:32

Acties:

T-MOB

Over de andere boeg kun je ook kijken naar behaviours. Ik geloof dat Clay hier op GoT een artikel on-line heeft staan onder de titel "whatever hover". Daarmee kun je de :hover pseudoclass ook laten werken in IE < 7. Dat lijkt me alleszinds een elegantere oplossing

Dit is hem dus: whatever:hover

[ Voor 14% gewijzigd door T-MOB op 05-07-2007 11:34 ]

Regeren is vooruitschuiven

donderdag 5 juli 2007 12:18

Acties:

Mei

Topicstarter

Verwijderd schreef op donderdag 05 juli 2007 @ 10:56:
Waarom switch je classes? waarom verander je niet gewoon element.style.backgroundColor?

Markup, styling en behaviour moeten gescheiden blijven

Verder is een CSS bestand handiger om de styles later aan te passen dan een CSS file.

De reden dat ik de bekende *.htc niet heb gebruikt is omdat het nogal lomp is. Ik heb voor slechts enkele non-<a> elementen een hover nodig en het is de bedoeling dat het geheel zo snel en gebruiksvriendelijk (met hovers dus) werkt.

crisp schreef op donderdag 05 juli 2007 @ 11:00:
[...]

IE7 wel hoor. Als het puur een stylistische kwestie is zou ik eerst voor mezelf nagaan of je wel extra moeite zou moeten doen voor IE < 7.

De baas beslist

Verder heb ik nog geen IE7 (Mijn huidige Windows is niet 100% legaal. OEM versie weigerde te activeren, (*@^#(*&$(*^ MS

), dus kan daar niet eens in testen wat wel of niet werkt...

donderdag 5 juli 2007 12:34

Acties:

crisp

Devver

Pixelated

T-MOB schreef op donderdag 05 juli 2007 @ 11:32:
Over de andere boeg kun je ook kijken naar behaviours. Ik geloof dat Clay hier op GoT een artikel on-line heeft staan onder de titel "whatever hover". Daarmee kun je de :hover pseudoclass ook laten werken in IE < 7. Dat lijkt me alleszinds een elegantere oplossing

Dit is hem dus: whatever:hover

Dat hebben wij ook geprobeerd voor de vernieuwde frontpage maar de performance daarvan in complexe documenten is om te janken en was zelfs na een complete rewrite door mijzelf niet acceptabel te krijgen. Daarbij levert het in bepaalde situaties ongewenste effecten op. Fact is dat mbv simpele mouseover/mouseout events en het toevoegen/weghalen van een class de hover-state nooit precies te emuleren is in IE < 7, mede ook door andere bugs/tekortkomingen van IE.

Mei: "de baas beslist" - maar jij kan hem feiten geven waarop hij zijn beslissing kan baseren of zelfs heroverwegen. IE6 marktaandeel is al aardig geslonken het afgelopen jaar en zal steeds verder slinken. Daarnaast kost het gewoonweg extra tijd om bepaalde zaken die in andere browsers gewoon werken ook werkend te krijgen in IE6. De rest is dus gewoon een optelsommetje van kosten/baten, aantal affected bezoekers en mate van degradatie.

[ Voor 19% gewijzigd door crisp op 05-07-2007 12:40 ]

Intentionally left blank

donderdag 5 juli 2007 12:48

Acties:

Mei

Topicstarter

crisp schreef op donderdag 05 juli 2007 @ 12:34:
[...]
Mei: "de baas beslist" - maar jij kan hem feiten geven waarop hij zijn beslissing kan baseren of zelfs heroverwegen. IE6 marktaandeel is al aardig geslonken het afgelopen jaar en zal steeds verder slinken. Daarnaast kost het gewoonweg extra tijd om bepaalde zaken die in andere browsers gewoon werken ook werkend te krijgen in IE6. De rest is dus gewoon een optelsommetje van kosten/baten, aantal affected bezoekers en mate van degradatie.

Je hebt ook zeker gelijk, maar we hebben afgesproken het in IE6 ook te laten werken. Normaliter is dat nooit zo'n groot probleem. Dit is de eerste keer dat ik met zoiets problemen heb. Verder is dit ook niet echt een IE6 'probleem'. Zou toch graag willen weten of er hier iets aan te doen is of dat classes standaard de eigenschappen die aan elementen in het algemeen toegekend zijn niet kunnen overschrijven.

donderdag 5 juli 2007 13:01

Acties:

crisp

Devver

Pixelated

Mei schreef op donderdag 05 juli 2007 @ 12:48:
[...]

Je hebt ook zeker gelijk, maar we hebben afgesproken het in IE6 ook te laten werken.

Define "laten werken"; als het hover-effect dat je tracht te bewerkstelligen puur stylistisch is dan "werkt" het toch ook zonder?

Zou toch graag willen weten of er hier iets aan te doen is of dat classes standaard de eigenschappen die aan elementen in het algemeen toegekend zijn niet kunnen overschrijven.

De casus die je in je topic-start beschrijft zou gewoon moeten werken. Dit soort dingen leveren echter wel problemen op in IE < 7 vanwege de manier waarop IE < 7 selectors parsed:

HTML:

<style type="text/css">

.foo {
  background-color: red;
}
.bar {
  background-color: yellow;
}
.foo.hover {
  background-color: green;
}
.bar.hover {
  background-color: blue;
}

</style>
<div class="foo">red</div>
<div class="bar">yellow</div>
<div class="foo hover">should be green but is rendered blue in IE6 and below</div>
<div class="bar hover">blue</div>
<div class="hover">and this is also rendered blue in IE6 and below</div>

Intentionally left blank

donderdag 5 juli 2007 13:36

Acties:

Mei

Topicstarter

crisp schreef op donderdag 05 juli 2007 @ 13:01:
[...]

Define "laten werken"; als het hover-effect dat je tracht te bewerkstelligen puur stylistisch is dan "werkt" het toch ook zonder?

Hover effecten werken wat lekkerder. Als het mogelijk is, dan probeer ik ook te zorgen dat dit soort dingen zoveel mogelijk in IE6 werkt.

De casus die je in je topic-start beschrijft zou gewoon moeten werken. Dit soort dingen leveren echter wel problemen op in IE < 7 vanwege de manier waarop IE < 7 selectors parsed:

HTML:

<style type="text/css">

.foo {
  background-color: red;
}
.bar {
  background-color: yellow;
}
.foo.hover {
  background-color: green;
}
.bar.hover {
  background-color: blue;
}

</style>
<div class="foo">red</div>
<div class="bar">yellow</div>
<div class="foo hover">should be green but is rendered blue in IE6 and below</div>
<div class="bar hover">blue</div>
<div class="hover">and this is also rendered blue in IE6 and below</div>

Ik weet dat IE die niet ondersteunt, dus dat probeer ik ook te vermijden. Het gaat trouwens om de volgende code:

Cascading Stylesheet:

    #statusalert div
    {
        background-color:#333;
    }
    #statusalert div.hover
    {
        background-color:#666;
    }

Waarbij #statusalert nog een class kan hebben.

JavaScript:

var oBox=document.createElement('div');
            oBox.id='statusalert';

var oButton=document.createElement('div');
            oButton.onmouseover=function(){this.className='hover'};
            oButton.onmouseout=function(){this.className=''};

oBox.appendChild(oButton);

Even voor de duidelijkheid: Dit met de classes werkt dus in zowel FF als IE niet. Dus geen IE-only dingetje.

donderdag 5 juli 2007 13:44

Acties:

crisp

Devver

Pixelated

works fine here:

HTML:

<style type="text/css">

#statusalert div
{
    width: 400px;
    height: 200px;
    background-color:#333;
}
#statusalert div.hover
{
    background-color:#666;
}


</style>
<script type="text/javascript">

window.onload = function()
{
    var oBox=document.createElement('div');
    oBox.id='statusalert';

    var oButton=document.createElement('div');
    oButton.onmouseover=function(){this.className='hover'};
    oButton.onmouseout=function(){this.className=''};

    oBox.appendChild(oButton);
    document.body.appendChild(oBox);
}

</script>
<body>
</body>

Intentionally left blank

donderdag 5 juli 2007 13:53

Acties:

Niemand_Anders

Dat was ik niet..

De baas beslist Verder heb ik nog geen IE7 (Mijn huidige Windows is niet 100% legaal. OEM versie weigerde te activeren, dus kan daar niet eens in testen wat wel of niet werkt...

Voor hoeveel procent is jouw installatie dan wel legaal?

Verder adviseer ik je baas om direct de windows licenties in orde te maken. En als de activatie niet lukt, moet je gewoon met Microsoft Nederland bellen. Die lossen dat binnen 5 minuten op (telefonische activatie). Het telefoonummer staat op de website van Microsoft en ook in de handleiding.

Bedrijven die illegale software draaien, dat kan echt niet hoor!

If it isn't broken, fix it until it is..

donderdag 5 juli 2007 13:59

Acties:

Mei

Topicstarter

Niemand_Anders schreef op donderdag 05 juli 2007 @ 13:53:
[...]

Voor hoeveel procent is jouw installatie dan wel legaal?

Verder adviseer ik je baas om direct de windows licenties in orde te maken. En als de activatie niet lukt, moet je gewoon met Microsoft Nederland bellen. Die lossen dat binnen 5 minuten op (telefonische activatie). Het telefoonummer staat op de website van Microsoft en ook in de handleiding.

Bedrijven die illegale software draaien, dat kan echt niet hoor!

Ik werk thuis

Heb wel een OEM licentie, maar zooi wilde de tweede keer niet activeren. Had toen geen zin om achter zoiets stoms aan te gaan ("This well-loved feature called activation"). Wat de baas op zijn kantoor doet moet-ie zelf weten, hier heeft-ie iig niks over te zeggen

@Crisp: raar dan.. Ik ga eens wat proberen.

donderdag 5 juli 2007 14:44

Acties:

Mei

Topicstarter

Got it

Ik voegde nog een class aan #statusalert toe, zodat de box aan de hand van de status een andere styling kon krijgen. Dit werkte dus niet lekker. Heb deze class toegekend aan een andere div die er toch al binnen zat, maar die nog geen classes of ID's had. Gelijk de hele code maar omgegooid. Het werkt nu goed en de hele functie is van 100 naar 85 regels gegaan.

Bedankt voor het helpen!

Pagina: 1

Reageer