Werkt :hover toch ook met andere elementen in IE? - Softwareontwikkeling

dinsdag 10 mei 2005 13:19

Acties:

Analytics dude

Topicstarter

Ik heb hier een testcase:

code:

<html>
  <head>
    <title>Test</title>
    <style type="text/css">
      .thumb a img {
        border: 2px solid #FFFFFF;
      }

      .thumb a:hover img {
        border: 2px solid #FF0000;
      }

      .thumb a:hover { blaat }
    </style>
  </head>
  <body>
    <div class="thumb"><a href=""><img border="0" src="test.jpg"></a></div>
  </body>
</html>

Zoals je weet zouden de eerste 2 classes in de CSS niet werken in IE omdat je met de :hover alleen de a kunt aanpassen. Maar op het moment dat ik de laatste regel invoeg werkt het wel in IE, wie kant dit verklaren? Zonder die laatste regel zou er geen border verschijnen in IE, en nu verschijnt die wel.

dinsdag 10 mei 2005 13:23

Acties:

Clay

cookie erbij?

Ik geloof dat dit gewoon een van de ontelbare bugs van IE is. Zonder die laatste rule heeft de a zelf op zich geen hover, dus werkt het met die image ook niet. Dat het dan wel werkt als je de a ook laat verandere onhover is idd vreemd

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

dinsdag 10 mei 2005 13:28

Acties:

BtM909

Watch out Guys...

Clay schreef op dinsdag 10 mei 2005 @ 13:23:
Ik geloof dat dit gewoon een van de ontelbare bugs van IE is. Zonder die laatste rule heeft de a zelf op zich geen hover, dus werkt het met die image ook niet. Dat het dan wel werkt als je de a ook laat verandere onhover is idd vreemd

Aan de andere kant, mocht het een bug zijn die in 5.5 (0.1;)) + werkt, dan zou het natuurlijk wel een hele simpele methode zijn

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 10 mei 2005 13:31

Acties:

André

Analytics dude

Topicstarter

BtM909 schreef op dinsdag 10 mei 2005 @ 13:28:
[...]

Aan de andere kant, mocht het een bug zijn die in 5.5 (0.1;)) + werkt, dan zou het natuurlijk wel een hele simpele methode zijn

Op die manier kun je de Suckerfish menu's zonder JS in IE laten werken. Maar het is wel raar, want het gaat er om dat er wat in staat, en daarom heb ik die blaat er in gezet. Zonder inhoud werkt het weer niet.

dinsdag 10 mei 2005 13:35

Acties:

BtM909

Watch out Guys...

André schreef op dinsdag 10 mei 2005 @ 13:31:
[...]

Op die manier kun je de Suckerfish menu's zonder JS in IE laten werken. Maar het is wel raar, want het gaat er om dat er wat in staat, en daarom heb ik die blaat er in gezet. Zonder inhoud werkt het weer niet.

Ehm m'n reply staat er maar half

(klote proxy

)

Anywee, dan hoeft die :hover behaviour niet meer. Ga zo even testen waar het wel / niet werkt

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 10 mei 2005 13:38

Acties:

RuudBurger

mm idd raar. maar volgens mij ziet hij de img tag dan niet meer. waardoor de <a> een border krijgt ipv de img in de <a>

dinsdag 10 mei 2005 13:41

Acties:

Zr40

Moderator General Chat

heeft native IPv6

Kijk eens goed naar je CSS:

Cascading Stylesheet:

1
2
3

.thumb a:hover img {
    /* ... */
}

Dit werkt, omdat je :hover hebt op a. Gebruik je echter:

Cascading Stylesheet:

1
2
3

.thumb a:hover img:hover {
   /* ... */
}

dan werkt het niet.

Je testcase werkt overigens ook zonder .thumb a:hover { blaat }

[ Voor 7% gewijzigd door Zr40 op 10-05-2005 13:43 . Reden: Correctie en verduidelijking ]

dinsdag 10 mei 2005 13:43

Acties:

BtM909

Watch out Guys...

Zr40 schreef op dinsdag 10 mei 2005 @ 13:41:
Kijk eens goed naar je CSS:
Cascading Stylesheet:
1
2
3
.thumb a:hover img {
    /* ... */
}
Dit werkt, omdat je :hover hebt op a. Gebruik je echter:
Cascading Stylesheet:
1
2
3
.thumb a:hover img:hover {
   /* ... */
}
dan werkt het niet.

Je testcase werkt overigens ook zonder:
Cascading Stylesheet:
1
.thumb a:hover { blaat }

Ehm, waar test je in, want het gaat hier om IE en daar werkt het 1000% (weet je wat: 1000000000%) niet

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 10 mei 2005 13:44

Acties:

Zr40

Moderator General Chat

heeft native IPv6

BtM909 schreef op dinsdag 10 mei 2005 @ 13:43:
[...]

Ehm, waar test je in, want het gaat hier om IE en daar werkt het 1000% (weet je wat: 1000000000%) niet

Ik heb dit getest in IE 6.0.2900

dinsdag 10 mei 2005 13:44

Acties:

Cyphax

Moderator LNX

Zr40 schreef op dinsdag 10 mei 2005 @ 13:41:
Kijk eens goed naar je CSS:
Cascading Stylesheet:
1
2
3
.thumb a:hover img {
    /* ... */
}
Dit werkt, omdat je :hover hebt op a. Gebruik je echter:
Cascading Stylesheet:
1
2
3
.thumb a:hover img:hover {
   /* ... */
}
dan werkt het niet.

Je testcase werkt overigens ook zonder:
Cascading Stylesheet:
1
.thumb a:hover { blaat }

Het gaat erom dat de border om de img komt, niet om de anchor. Maar IE kent :hover niet voor andere elementen als <a> dus dat is het opmerkelijke nou net.

De testcase werkt NIET zonder die .thumb a:hover { bla } in Internet explorer (wel in andere browsers) en daar ging het nou net om.

[edit] Ik heb het hier getest met 2800, jij met 2900? Misschien een fix van MS?

[ Voor 7% gewijzigd door Cyphax op 10-05-2005 13:45 ]

Saved by the buoyancy of citrus

dinsdag 10 mei 2005 13:48

Acties:

T-MOB

Sillymidget schreef op dinsdag 10 mei 2005 @ 13:38:
mm idd raar. maar volgens mij ziet hij de img tag dan niet meer. waardoor de <a> een border krijgt ipv de img in de <a>

Nope, dat is niet waar. Zo kun je zien dat de border om de img komt en niet om de <a>:

HTML:

<html>
  <head>
    <title>Test</title>
    <style type="text/css">
      .thumb a { background: blue; padding: 5px; }
    
      .thumb a img {
             border: 2px solid #FFFF00;
      }

      .thumb a:hover img {
        border: 2px solid #FF0000;
      }

      .thumb a:hover { blaat }
    </style>
  </head>
  <body>
    <div class="thumb"><a href="">[img]"test.jpg"></a></div>
[/img]
</html>

En het gaat (bij mij) goed in IE 5.01 t/m IE 6, FF, Opera 7.23 en 7.54.. (ff for the record)

[ Voor 29% gewijzigd door T-MOB op 10-05-2005 13:52 ]

Regeren is vooruitschuiven

dinsdag 10 mei 2005 13:53

Acties:

Zr40

Moderator General Chat

heeft native IPv6

Volgens mij zit 2900 bij SP2.

Ik heb de testcase iets aangepast:

HTML:

<html>
  <head>
    <title>Test</title>
    <style type="text/css">
      .thumb a img, .thumb a span {
        border: 2px solid #FFFFFF;
        background: white;
      }
      .thumb a:hover img, .thumb a:hover span {
        border: 2px solid #FF0000;
        background: blue;
      }

      .thumb2 a img, .thumb2 a span {
        border: 2px solid #FFFFFF;
        background: white;
      }
      .thumb2 a img:hover, .thumb2 a span:hover {
        border: 2px solid #FF0000;
        background: blue;
      }
    </style>
  </head>
  <body>
    <div class="thumb"><a href="">[img]"test.jpg"[/img]</a></div>
    <div class="thumb2"><a href="">[img]"test.jpg"[/img]</a></div>
    <div class="thumb"><a href=""><span>On hover style door a:hover</span></a></div>
    <div class="thumb2"><a href=""><span>On hover style door span:hover</span></a></div>
  </body>
</html>

[ Voor 23% gewijzigd door Zr40 op 10-05-2005 13:55 . Reden: Inspringing gecorrigeerd ]

dinsdag 10 mei 2005 13:57

Acties:

Cyphax

Moderator LNX

Zr40 schreef op dinsdag 10 mei 2005 @ 13:53:
Volgens mij zit 2900 bij SP2.

Ik heb de testcase iets aangepast:

Hmmm die werken geen van allen hier. En dat is XP SP1. MS heeft dus voor SP2 aan IE zitten sleutelen?

Saved by the buoyancy of citrus

dinsdag 10 mei 2005 13:58

Acties:

André

Analytics dude

Topicstarter

Cyphax schreef op dinsdag 10 mei 2005 @ 13:44:
[...]
Ik heb het hier getest met 2800, jij met 2900? Misschien een fix van MS?

Ik heb de testcase gedaan in 2900

dinsdag 10 mei 2005 14:04

Acties:

BtM909

Watch out Guys...

T-MOB schreef op dinsdag 10 mei 2005 @ 13:48:
[...]

Nope, dat is niet waar. Zo kun je zien dat de border om de img komt en niet om de <a>:

HTML:

<html>
  <head>
    <title>Test</title>
    <style type="text/css">
      .thumb a { background: blue; padding: 5px; }
    
      .thumb a img {
             border: 2px solid #FFFF00;
      }

      .thumb a:hover img {
        border: 2px solid #FF0000;
      }

      .thumb a:hover { blaat }
    </style>
  </head>
  <body>
    <div class="thumb"><a href="">[img]"test.jpg"></a></div>
[/img]
</html>

En het gaat (bij mij) goed in IE 5.01 t/m IE 6, FF, Opera 7.23 en 7.54.. (ff for the record)

Haal nu die laatste blaat hover eens weg?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 10 mei 2005 14:04

Acties:

Cyphax

Moderator LNX

André schreef op dinsdag 10 mei 2005 @ 13:58:
[...]

Ik heb de testcase gedaan in 2900

Ja hee, nog vreemder

Saved by the buoyancy of citrus

dinsdag 10 mei 2005 14:15

Acties:

Zr40

Moderator General Chat

heeft native IPv6

Kleine demonstratie gebaseerd op dezelfde techniek: (witruimte is weggehaald voor compactheid)

HTML:

<html><head><title>Test</title><style type="text/css">
a{background:black;cursor:default;color:white;font-weight:bold;padding:0.25em}
a:hover{background:white;color:black;text-decoration:none}
.rood, .groen, .blauw{padding:0.25em;margin:0.25em}
.rood{background:red}
.groen{background:green}
.blauw{background:blue}
a:hover .rood{background:green;color:blue}
a:hover .groen{background:blue;color:red}
a:hover .blauw{background:red;color:green}
</style></head><body><a href="">
<span class='rood'>rood</span> <span class='groen'>groen</span> <span class='blauw'>blauw</span>
</a></body></html>

dinsdag 10 mei 2005 14:46

Acties:

Verwijderd

Waarom zou 'a:hover span' niet werken in IE? Moet 'a:hover' soms de laatste in een serie zijn? Dat 'li:hover a' niet werkt ok, maar 'a:hover span' lijkt me raar.

dinsdag 10 mei 2005 17:15

Acties:

Spruit_elf

Intentionally left blank

als ik ff snel het in probeer te bouwen in een suckerfish menutje vallen me een paar dingen op

1 het werkt niet
2 met a:hover ul doet ie helemaal niets
3 met a:hover li doet ie wel iets maar weer heel vreemd (alleen eerste li kleurt)

en ik vermoed dat het geheel een bug is in IE en dat het voornamelijk met kleuren werkt

EDIT volgens mij was dit een hoop onzin, kijk er later nog wel ff naar

[ Voor 81% gewijzigd door Spruit_elf op 10-05-2005 17:16 ]

Those who danced were thought to be quite insane by those who could not hear the music.

woensdag 11 mei 2005 00:16

Acties:

Verwijderd

André schreef op dinsdag 10 mei 2005 @ 13:31:
Op die manier kun je de Suckerfish menu's zonder JS in IE laten werken.

Niet als je wilt dat je HTML valideert...

woensdag 11 mei 2005 09:47

Acties:

Spruit_elf

Intentionally left blank

hmmm grappig zo blijkt dat je met IE toch meer met hover kan doen dan ik dacht, het nadeel is dat suckerfish menutjes niet werken tenzij je de menu opties met iets anders doet dan <a> want zowel FF als IE vinden het neit leuk als je nested <a>'s gebruikt

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en">
<head>
<title>the Suckerfish</title>
<style type="text/css">
li {
}
li ul {
    display: none;
}
li li {
    display: block;
}
li:hover ul {
    display: block;
}
a:hover ul {
    _display: block;
}
a:hover {
    _background: #000;
}
</style>
</head>
<body>
<ul>
    <li><a href="li1">blaat
        <ul>
            <li><a href="menuoptie1li1">Classification</a></li>
            <li>Classification</li>
            <li><a href="menuoptie3li1">Classification</a></li>
            <li>Classification</li>
            <li>Classification</li>
        </ul></a>
    </li>
    <li><a href="li2">blaat2
        <ul>
            <li>Classification</li>
            <li>Classification</li>
            <li>Classification</li>
            <li>Classification</li>
        </ul></a>
    </li>
</ul>
</body>
</html>

the suckerfish testcase

[ Voor 65% gewijzigd door Spruit_elf op 11-05-2005 09:51 ]

Those who danced were thought to be quite insane by those who could not hear the music.

woensdag 11 mei 2005 11:31

Acties:

Dirtbiter

geprobeerd op windows 2000 met IE 6.0.2800 en daar werkt de 1e testcase inderdaad niet meer als je het "blaat" statement weglaat...