HTML/CSS: Div-Bereiche mit Hover-Farbe

**malo**

Hi!

Ich hab einige <div>-Bereiche, wo mein Text etc. reinkommt. Diese haben nun auch diverse IDs und Klassen. Jetzt möchte ich aber, dass in dem jeweiligen Bereich die Hintergrundfarbe geändert wird, sobald die Maus drüber kommt. Wenn ich einen Link dort hätte, könnte ich es etwa so machen:

markieren

Code:

			div#a a:hover {

  background-color: black;

  }

Wie kann ich den Stylesheet nun so verändern, dass das "Hover"-Ereignis unabhängig von irgendwelchen Links oder anderen Elementen ausgelöst wird? "div:hover" hab ich schon versucht, das geht nicht...

Soll am Ende so ähnlich aussehen, wie die Forenansicht der DP...

Nur für diejenigen, die noch nicht verstanden haben sollten, was ich meine...

**Meflin**

Also die DP zumindest macht das mit JavaScript, und ich bin mir auch nciht sicher, dass das mit CSS geht, da ja nur Links dieses Hover Teil haben. Du müsstest diese Bereiche schon irgendwie als Link machen, z.b. mit # oder so, ohne wirds nciht gehen

**malo**

Zitat von Meflin:

Also die DP zumindest macht das mit JavaScript, und ich bin mir auch nciht sicher, dass das mit CSS geht, da ja nur Links dieses Hover Teil haben. Du müsstest diese Bereiche schon irgendwie als Link machen, z.b. mit # oder so, ohne wirds nciht gehen

Naja, schade, wenns nicht mit CSS gehen würde... Rückmeldungen sind jederzeit erwünscht, auch evtl. Lösungsvorschläge mit JS

Ist es das was du meinst?

markieren

Code:

			<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head><title>Titel</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style><!--

body {

background:#FFFFFF;

margin:25px;

overflow:auto;

}

div.hov {

border:1px solid #808080;

background:#E9E9E9;

font-family:Arial;

font-size:12px;

font-style:normal;

font-weight:normal;

padding:8px;

width:500px;

}

div.hov:hover {

background:#F4F4F4;

width:500px;

}

--></style></head>

<body>

<div class="hov">

KeePass Password Safe ermöglicht das Verwalten von Passwörtern.

Eine Einsetzung ist gerade dann von Vorteil, wenn Sie verschiedene

Kennwörter haben und sich diese nur schwer merken können.

Das Programm speichert das Ganze in einer verschlüsselten Datenbank ab.

Das Tool steht nun in der Version 1.02 bereit.

</div>

</body></html>

**Mystic**

Im Prinzip geht das, nur der IE kann das nicht (dort ist :hover nur für das <a>-Element verfügbar).

Es gibt da die

Scriptsammlung IE7, die man per Conditional Comment explizit für den IE einbindet. Diese Scripts stellen folgende Funktionen zur Verfügung:

Zitat:

IE7 provides Microsoft Internet Explorer with support for W3C standard CSS and HTML:

supports the following CSS selectors:
- namespace|selector
- parent > child
- adjacent + sibling
- adjacent ~ sibling
- [attr], [attr="value"], [attr~="value"] etc
- .multiple.classes (fixes bug)
- :hover, :active, :focus (for all elements)
- :first-child, :last-child, only-child, nth-child, nth-last-child
- :check, :disabled, :enabled
- :root, :empty, :contains(), :not()
- :before/:after/content:
- :lang()
works with both HTML and XML documents
supports imported style sheets
preserves the cascade of the style sheet
does not alter the document structure
does not repeatedly query the DOM tree using JavaScript
uses pure CSS to enforce style sheet rules
supports the W3C box model in both standards and quirks mode
supports fixed positioning (flicker free)
supports overflow:visible
supports min/max-width/height
fixes broken (X)HTML elements (abbr, object)
standardies forms behavior
supports PNG alpha transparency
lightweight script (22K)
completely modular (add/remove fixes)
works for Microsoft Internet Explorer 5+ (Windows only)

**malo**

Naja, ich würd dann einfach mal spntan sagen: Pech für IE-User. Haben die halt ein "langweiliges" Design

Werd es dann aber wohl mit dem CSS-Code machen... Danke

Zitat von malo:

Naja, ich würd dann einfach mal spntan sagen: Pech für IE-User. Haben die halt ein "langweiliges" Design

Das ist genau die richtige Einstellung.

Wenn der Browser zu dumm ist, ist er eben zu dumm. Man sollte die Leute mit ekligen Hacks nicht noch ermutigen dieses Mistvieh zu benutzen...

Kann der IE 7 diesen CSS-Hover nicht darstellen?

Deer Park 2 kann es.

**alcaeus**

Zitat von malo:

Pech für IE-User. Haben die halt ein "langweiliges" Design

Witzbold. Wie pflege ich zu sagen: gute Webdesigner passen sich an ihre Umgebung an. Du musst einen guten Kompromiss zwischen Kompatibilitaet und "Schoenheit" finden. Manchmal bedeutet das, dass man Ueberstunden schieben muss, na und? Glaubst du mir hats gefallen, meinen gesamten JS-Code umzuschreiben, weil FF nicht alles laut Standard implementiert hat? Natuerlich nicht, aber ich haette auch sagen koennen "Ach, scheiss auf den Fuchs, muessen die halt ohne schoene Effekte leben", aber als Webdesigner hab ich mir die Muehe gemacht, ein paar Hundert Zeilen Code umzuschreiben.

Ausserdem hab ich in den Spezifikationen noch nicht gesehn, dass :hover fuer alle Elemente gilt, wenn ich mich richtig erinnere so gilt das nur fuer das <a>-Element, wobei einige Browser diese Pseudoklassen fuer alle Elemente als gueltig ansehn. Vielleicht kann mir jemand mal eine offizielle Spezifikation zeigen, in der das Gegenteil steht.

Greetz
alcaeus

**S2B**

Zitat von alcaeus:

Vielleicht kann mir jemand mal eine offizielle Spezifikation zeigen, in der das Gegenteil steht.

Ich glaube, die gibt es (noch) nicht...

in der Spezifikation von CSS2 steht folgendes:

Zitat von Cascading Style Sheets, Level 2:

CSS definiert nicht, welche Elemente sich in den oben beschriebenen Status befinden können, oder wie man in einen der Status gelangt oder ihn verlässt. Mit Hilfe von Skripting kann bestimmt werden, ob Elemente auf Benutzerereignisse reagieren oder nicht, und unterschiedliche Geräte und Benutzerprogramme können unterschiedliche Methoden aufweisen, wie auf Elemente gezeigt wird bzw. wie diese aktiviert werden.

Quelle:

http://edition-w3c.de/TR/1998/REC-CS...ding-5.11.3%A0

Also nochmal Glück für deinen geliebten IE.

HTML/CSS: Div-Bereiche mit Hover-Farbe

HTML/CSS: Div-Bereiche mit Hover-Farbe

Re: HTML/CSS: Div-Bereiche mit Hover-Farbe

Re: HTML/CSS: Div-Bereiche mit Hover-Farbe

Re: HTML/CSS: Div-Bereiche mit Hover-Farbe

Re: HTML/CSS: Div-Bereiche mit Hover-Farbe

Re: HTML/CSS: Div-Bereiche mit Hover-Farbe

Re: HTML/CSS: Div-Bereiche mit Hover-Farbe

Re: HTML/CSS: Div-Bereiche mit Hover-Farbe

Re: HTML/CSS: Div-Bereiche mit Hover-Farbe

Re: HTML/CSS: Div-Bereiche mit Hover-Farbe

Forumregeln

Meflin Registriert seit: 21. Aug 2003 4.856 Beiträge	#2 Re: HTML/CSS: Div-Bereiche mit Hover-Farbe 5. Sep 2005, 20:46 Also die DP zumindest macht das mit JavaScript, und ich bin mir auch nciht sicher, dass das mit CSS geht, da ja nur Links dieses Hover Teil haben. Du müsstest diese Bereiche schon irgendwie als Link machen, z.b. mit # oder so, ohne wirds nciht gehen Leo S. https://github.com/leoschweizer
	Zitat

malo Registriert seit: 19. Sep 2004 2.115 Beiträge	#6 Re: HTML/CSS: Div-Bereiche mit Hover-Farbe 5. Sep 2005, 21:13 Naja, ich würd dann einfach mal spntan sagen: Pech für IE-User. Haben die halt ein "langweiliges" Design Werd es dann aber wohl mit dem CSS-Code machen... Danke
	Zitat

Robert_G (Gast) n/a Beiträge	#7 Re: HTML/CSS: Div-Bereiche mit Hover-Farbe 5. Sep 2005, 21:21 Zitat von malo: Naja, ich würd dann einfach mal spntan sagen: Pech für IE-User. Haben die halt ein "langweiliges" Design Das ist genau die richtige Einstellung. Wenn der Browser zu dumm ist, ist er eben zu dumm. Man sollte die Leute mit ekligen Hacks nicht noch ermutigen dieses Mistvieh zu benutzen...
	Zitat

bigg (Gast) n/a Beiträge	#8 Re: HTML/CSS: Div-Bereiche mit Hover-Farbe 5. Sep 2005, 21:24 Kann der IE 7 diesen CSS-Hover nicht darstellen? Deer Park 2 kann es.
	Zitat