Forum für CMS/made simple

brandy

Server-Pate

Registriert: 05. Juni 2011

Beiträge: 803

Webseite

CSS - div:hover Internet Explorer

Hallo!

Ich hab mir eine Seite gebastelt, bei der ich verschiedene DIVs mit dem :hover "Befehl" belegt habe. Es ist also ein transparentes DIV, dass on hover 80% weiß wird. Gut dies funktioniert im Firefox und im Opera, Safari hab ich jetzt leider nicht da zum Testen. Im lieben Kollegen Internet Explorer funktioniert dies natürlich wieder nicht. Gibts da einen bestimmten Grund?

Um euch das vor Augen zu führen, hier die ID

#a2:hover{
background-color: #fff;
color: #000;
opacity: .8;
filter: Alpha(opacity=80);
-moz-opacity: .8;
}

Vielen Dank!

nicmare

Server-Pate

Registriert: 15. Dezember 2010

Beiträge: 1.314

Webseite

Re: CSS - div:hover Internet Explorer

man kann auch nur a zuverlässig via css hovern. der ie spielt bei anderen elementen nicht. in sofern ganz normales verhalten. also ersetze dein div konstrukt mit links: <a id="a2">…</a>

---

Meine Projekte:
Dashcam-Test | Babyphone-Testberichte | Türspionkameras

mike-r

arbeitet mit CMS/ms

Registriert: 21. Dezember 2010

Beiträge: 898

Webseite

Re: CSS - div:hover Internet Explorer

Das Problem tritt nur in IE6 auf und den sollte man bei so einem banalen (Nicht-)Effekt vernachlässigen können.
Alternativ kann man für den IE6 über einen Star-Hack, den BG gleich auf weiss setzen (vor allem, wo der bei Transparenzen schon zickt).

Sollte das in IE>6 auftreten: validieren, korrigieren und somit den Kompatibilitätsmodus umgehen.

Beitrag geändert von mike-r (13. Juni 2012 12:03)

---

Unablässige Tools für's Webdevelopement/ Fehlerfindung: CSS Validierungsservice, Bildschirmlineal, Firebug, Tidy, Deutsche CSS-Referenz

brandy

Server-Pate

Registriert: 05. Juni 2011

Beiträge: 803

Webseite

Re: CSS - div:hover Internet Explorer

Vielen Dank für eure Antworten!

Ich habs aber mit IE 8 vergeblich getestet - jetzt hab ich es sogar schon auf Links umgebaut und es geht immer noch nicht...

Hier der Teil des Templates:

 Hier klicken, um den Code zum Kopieren zu markieren

<div id="left">
<a href="http://www.magu.co.at/index.php?page=vws" id="a1">VWS</a><a href="http://www.magu.co.at/index.php?page=innenputz"  id="a2">Innenputz</a>
<a href="http://www.magu.co.at/index.php?page=aussenputz" id="b1">Aussenputz</a><a href="http://www.magu.co.at/index.php?page=sanieren" id="b2">Sanieren</a>
<a href="http://www.magu.co.at/index.php?page=bilder" id="c1">Bilder</a>
</div>

Hier das CSS:

 Hier klicken, um den Code zum Kopieren zu markieren

#a1{
width: 88px;
height: 45px;
z-index: 20;
position: relative;
float: left;
margin-left: 106px;
margin-top: 48px;
font-family: sans-serif;
font-weight: bold;
color: #fff;
text-align:center;
padding-top: 30px;
opacity: .0;
filter: Alpha(opacity=00);
-moz-opacity: .0;
display:block
}

#a1:hover{
background-color: #fff;
color: #000;
opacity: .8;
filter: Alpha(opacity=80);
-moz-opacity: .8;
display:block
}

#a2{
width: 137px;
height: 80px;
z-index: 20;
margin-left: 219px;
margin-top: 4px;
font-family: sans-serif;
font-weight: bold;
color: #fff;
padding-top: 55px;
text-align: center;
opacity: .0;
filter: Alpha(opacity=00);
-moz-opacity: .0;
display:block
}

#a2:hover{
background-color: #fff;
color: #000;
opacity: .8;
filter: Alpha(opacity=80);
-moz-opacity: .8;
display:block
}

#b1{
width: 123px;
height: 69px;
z-index: 20;
position: relative;
float: left;
margin-left: 48px;
margin-top: 8px;
font-family: sans-serif;
font-weight: bold;
color: #fff;
padding-top: 50px;
text-align: center;
opacity: .0;
filter: Alpha(opacity=00);
-moz-opacity: .0;
display:block
}

#b1:hover{
background-color: #fff;
color: #000;
opacity: .8;
filter: Alpha(opacity=80);
-moz-opacity: .8;
display:block
}

#b2{
width: 114px;
height: 72px;
z-index: 20;
margin-left: 206px;
margin-top: 31px;
font-family: sans-serif;
font-weight: bold;
color: #fff;
padding-top: 45px;
text-align: center;
opacity: .0;
filter: Alpha(opacity=00);
-moz-opacity: .0;
display:block
}

#b2:hover{
background-color: #fff;
color: #000;
opacity: .8;
filter: Alpha(opacity=80);
-moz-opacity: .8;
display:block
}

#c1{
width: 78px;
height: 40px;
z-index: 20;
margin-left: 103px;
margin-top: 22px;
font-family: sans-serif;
font-weight: bold;
color: #fff;
padding-top: 25px;
text-align: center;
opacity: .0;
filter: Alpha(opacity=00);
-moz-opacity: .0;
display:block
}

#c1:hover{
background-color: #fff;
color: #000;
opacity: .8;
filter: Alpha(opacity=80);
-moz-opacity: .8;
display:block
}

owr_web

Server-Pate

Registriert: 16. Dezember 2010

Beiträge: 543

Re: CSS - div:hover Internet Explorer

Was hast du bei einem übergeordneten id als Background (z.B. beim left)?
Ich hab die erfahrung gemacht, dass der IE öfters bei backgrounds mit hover nicht durchblickt, wenn übergeordnete einen anderen Hintergrund hat.

brandy

Server-Pate

Registriert: 05. Juni 2011

Beiträge: 803

Webseite

Re: CSS - div:hover Internet Explorer

Ja ich hab mir ein Bild via Image-Tag hingelegt, und alles andere darübergestellt. Das wird da Problem sein. Da dies aber von einer anderen Idee herrührt könnte ich einfach das Bild in den Body-background legen und alles müsste funktionieren...

mike-r

arbeitet mit CMS/ms

Registriert: 21. Dezember 2010

Beiträge: 898

Webseite

Re: CSS - div:hover Internet Explorer

m(

Wenn ich mir die von Dir verlinkten Seite(n) anschaue, dann gehe ich stark davon aus, dass das Problem woanders liegt, nämlich im Kompatibilitätsmodus. Kann man das mal sehen?

Ich hab mir Deinen Code mal gerendert und ich bezweifle stark, dass Du wirklich so ein konfuses Menü haben willst, ist das Dein Ernst?
Der von dir gepostete Code funktioniert ab IE4 bis mindestens V7, V8 möchte hier bei mir ein kleingeschriebenes "alpha" haben. Warum das so ist, weiss sicher eine Suchmaschine.

Des Weiteren ist mir an Deinem CSS aufgefallen, dass Du durch ständige Wiederholung gleicher Eigenschaften das aufbläst bis sonstwohin.
Die wiederkehrenden Eigenschaften kannst Du einmalig definieren:

 Hier klicken, um den Code zum Kopieren zu markieren

#left a {
	z-index: 20;
	filter: alpha(opacity=00);
	opacity: .0;
	-moz-opacity: .0;
	text-align: center;
	font-weight: bold;
	color: #fff;
	font-family: sans-serif;
	display:block
}
#left a:hover {
	background-color: #fff;
	color: #000;
	opacity: .8;
	filter: alpha(opacity=80);
	-moz-opacity: .8;
	display:block
}

Des weiteren verwendest Du etliche Eigenschaften, die keinen Effekt haben. Was soll das display:block am hover bewirken? Oder was die relative Positionierung?

---

Unablässige Tools für's Webdevelopement/ Fehlerfindung: CSS Validierungsservice, Bildschirmlineal, Firebug, Tidy, Deutsche CSS-Referenz

brandy

Server-Pate

Registriert: 05. Juni 2011

Beiträge: 803

Webseite

Re: CSS - div:hover Internet Explorer

Ja die Eigenschaften, die nichts bewirken sind noch als Reliquien drinnen... Ich bin grade mitten am werklen, deshalb. Werd aber deinen Rat befolgen und ein wenig aufräumen.

Du kannst dir gar nicht vorstellen wie konfus dieses Menü ist*g*
Ich habs gerade auf einem anderen IE8 in der Firma getestet und da funktionierts...
Naja werd schon noch schlau werden...

Vielen Dank!

brandy

Server-Pate

Registriert: 05. Juni 2011

Beiträge: 803

Webseite

Re: CSS - div:hover Internet Explorer

Jetzt hab ich diesen hier eingefügt

 Hier klicken, um den Code zum Kopieren zu markieren

<meta http-equiv="X-UA-Compatible" content="IE=7" />

So funktionierts - man muss aber im Gegensatz zum Firefox direkt über den Text fahren, damit das ganze tranpsarente div angezeigt wird. Kann man da nochwas richten?

brandy

Server-Pate

Registriert: 05. Juni 2011

Beiträge: 803

Webseite

Re: CSS - div:hover Internet Explorer

Interessanterweise habe ich bei meinem Internet Explorer 8 zu Hause ein anderes Ergebnis als beim Internet Explorer in meiner Firma? Was kanns da haben...