Style Tag (Mehrere Styles in einem Attribut?)
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anwenden
attribut
browser
code
container
datei
definieren
definition
eigenschaft
element
farbe
funktion
hintergrund
klasse
mache
tag
teddy
text
url
verpassen
-
Als Beispiel nenne ich jetzt mal ".tag/container">container" und ".container:hover", welche ich beide in eine div legen möchte:
<div id="bla" style="????"> </div>
Wie mache ich das nun? Ich kann wohl schlecht zwei mal color definieren oder so ^^ -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Meinst du, dass man einmal eine Farbe für <div> hat und eine andere für das gleiche div:hover ?
Das wäre dann bei id="bla".
#bla {
color:red;
}
#bla:hover {
color:blue;
}
Oder was genau meinst du hier? -
Was meinst du genau?
Sowas?<div class="eineklasse andereklasse">
Oder eher sowas:<div style="stiel1: wert; stiel2:wert">
Auf jeden Fall darfst du eine Eigenschaft (z.B. Farbe) mehrmals definieren, am Ende wird die zuletzt ausgewertete Definition verwendet, außer du schreibst
zu der Definition die alle anderen Definitionen im gleichen Gültigkeitsbereich überschreiben soll.!important
Per inline-Style kannst du nur einen festen Style festlegen der für immer gilt, also nichts dynamisches. Dafür brauchst du dann CSS mit Selektoren.
und.container
wird automatisch zugeordnet sobald du.container:hover
schreibst, da das :hover nur auf "container" angewendet wird.<div class="container"> -
hackyourlife schrieb:
Was meinst du genau?
Sowas?<div class="eineklasse andereklasse">
Oder eher sowas:<div style="stiel1: wert; stiel2:wert">
Auf jeden Fall darfst du eine Eigenschaft (z.B. Farbe) mehrmals definieren, am Ende wird die zuletzt ausgewertete Definition verwendet, außer du schreibst
zu der Definition die alle anderen Definitionen im gleichen Gültigkeitsbereich überschreiben soll.!important
Per inline-Style kannst du nur einen festen Style festlegen der für immer gilt, also nichts dynamisches. Dafür brauchst du dann CSS mit Selektoren.
und.container
wird automatisch zugeordnet sobald du.container:hover
schreibst, da das :hover nur auf "container" angewendet wird.<div class="container">
Eher so etwas:
<div style="div:hover{stil1};div.nomal{stil2}">
Das das so in der Form nicht funktioniert ist mir klar ^^ deshalb möchte ich ja wissen, wie ich das schaffe? :P
Hab es schon mit einem onmouseover probiert, aber das funktioniert auch nicht (oder ich mache etwas falsch)..
Also das Ding ist: Ich hab im JS eine Funktion, die auf JQ basiert.. Mit dem DOM Parser wird ein Image ausgelesen, um das image herum wird ne div gelegt.. Nu möchte ich der div eben einen hover effekt verpassen ^^ Aber: mit dem ".wrap()" von JQ kann ich nur inline style's vergeben, alles andere funktioniert leider nicht :(
//EDIT:
Kann man in dem div ein Stylesheet einbinden?
Zum Beispiel
<div><link rel="stylesheet" href="internetseite.css"></div>
Beitrag zuletzt geändert: 3.7.2012 16:09:23 von kill-a-teddy -
ich glaub :hover ist dafür kein gutes Beispiel,
zum Einen, weil :hover im IE nur bei <a> Tags funktioniert
zum Anderen, weil :hover "nur" ein Selektor eines Elements und kein eigenständiger Style ist
wie hackyourlife ja erklärt hat:
hackyourlife schrieb:
CSS mit Selektoren.
und.container
wird automatisch zugeordnet sobald du.container:hover
schreibst, da das :hover nur auf "container" angewendet wird.<div class="container">
aber mal das BSP mit Hintergrund und Text-Farben
.bg_dunkel {
background:#000000;
}
.bg_hell {
background:#FFFFFF;
}
.txt_dunkel {
background:#000000;
}
.txt_hell {
background:#FFFFFF;
}
für Anwenung von 2 Klassen einfach in class="" beide durch Leerzeichen getrennt rein schreiben
<div class="bg_dunkel txt_hell"> Weißer Text auf schwarzem Hintergrund </div> <div class="bg_hell txt_dunkel"> Schwarzer Text auf weißem Hintergrund </div>
geht auch mit ID und Klasse gemischt
#dunkel {
background:#000000;
}
#hell {
background:#FFFFFF;
}
.txt_dunkel {
background:#000000;
}
.txt_hell {
background:#FFFFFF;
}
für Anwenung von Klasse und ID in einem Element einfach in beide normal zuweisen
<div id="dunkel" class="txt_hell"> Weißer Text auf schwarzem Hintergrund </div> <div id="hell" class="txt_dunkel"> Schwarzer Text auf weißem Hintergrund </div>
aber zwei IDs in einem Element machen glaub keinen Sinn :)
bei Selector (dynamische Pseudo-Klassen) wie a:hover oder p:first-letter
brauchst Du keinen extra-Style definieren, die greifen "dynamisch"
also für die angegebene Klasse bzw. für die ID (siehe BSP von hackyourlife oben)
EDIT .... ahhh .... Du willst :hover auf nicht-Link <a> Elemente anwenden ??? also z.B. auf <div>
die Pseudo-Klasse (selector) :hover ist eigentlich nur für <a> TAGs gedacht (links)
viele Browser können es auch nur dort anwenden
damit .container:hover { ... } geht kann man aber schon was tricksen
es gibt sowas wie "Whatever:hover" als .htc ... (siehe: http://www.google.de/search?q=hover+htc)
oder evtl auch was in jQuery oder ähnliches
also quasi per JavaScript den :hover -Effekt auf alle Elemente anwendbar gemacht
-
digg schrieb:
Wozu irgendwie tricksen anfangen? Das ist eine ganz normale genormte Pseudoklasse, die es ab spätestens CSS2 gibt.
ich glaub :hover ist dafür kein gutes Beispiel,
zum Einen, weil :hover im IE nur bei <a> Tags funktioniert
zum Anderen, weil :hover "nur" ein Selektor eines Elements und kein eigenständiger Style ist
[...]
EDIT .... ahhh .... Du willst :hover auf nicht-Link <a> Elemente anwenden ??? also z.B. auf <div>
die Pseudo-Klasse (selector) :hover ist eigentlich nur für <a> TAGs gedacht (links)
viele Browser können es auch nur dort anwenden
damit .container:hover { ... } geht kann man aber schon was tricksen
Näheres findest du in der Dokumentation der CSS-Selektoren.
There may be document language or implementation specific limits on which elements can become :active or acquire :focus.
Mehr als das wird dazu nicht gesagt...
Wenn du schon meinst, dass :hover von vielen Browsern nur für <a> verwendet werden kann, warum nennst du dann nicht die Quelle dieser Wahrheit?
Zu deinem Trick:This script is from 2003, and targets a flaw in IE6, which at its peak was a really popuplar browser. [Today (oct 2011) it no longer is, and as such this script should not really be necessary anymore.
Also kannst du diese Idee schnell wieder verwerfen, da der IE6 doch schon etwas veraltet ist und :hover von allen aktuelleren Browsern richtig interpretiert wird.
Please try to convice your client, project manager or boss, that not every browser needs to display a website the exact same way; it is the content that matters. And if you really still need to support IE6, don't use :hover for interaction. -
Offensichtlich kann man einem div bzw. einer Klasse einen :hover Attribut verpassen, denn wenn ich das in einer externen .css Datei mache funktioniert alles einwandfrei ;)
Ich glaube ihr habt die hälfte von dem Post überlesen ^^
Ich habe einmal meine Klasse .container und meine Klasse mit Hover .container:hover swap... Statt nun also beide klassen, die sich auf eine div beziehen in eine .css Datei zu packen, möchte ich diese in den Style Tag vom div rein packen.. Beispielsweise hat .container die Eigenschaft
aber beim hovernfarbe blau.container:hover swap{farbe lila;}
Soweit sollte das klar sein?
Nun kann man in einer div zwar einen Style attribut hinzufügen, allerdings wie gesagt auch nur einen
<div style="farbe blau"> </div>
Was ich aber tatsächlich möchte ist etwas in der art:
<div style="farbe blau" onmouseover="irgendwas, dass die farbe lila werden lässt, in css geschrieben"> </div> -
kill-a-teddy schrieb:
Und du kannst ihm kein
Nun kann man in einer div zwar einen Style attribut hinzufügen, allerdings wie gesagt auch nur einen
verpassen? Es muss also ein inline-Style sein? Schafft das jQuery sonst nicht?class -
hackyourlife schrieb:
kill-a-teddy schrieb:
Und du kannst ihm kein
Nun kann man in einer div zwar einen Style attribut hinzufügen, allerdings wie gesagt auch nur einen
verpassen? Es muss also ein inline-Style sein? Schafft das jQuery sonst nicht?class
So sieht das aus.. Wie gesagt benutze ich .wrap, um die Div um ein anderes Element zu legen.. Damit hab ich auch keine Probleme, ist eben nur dieser style Tag, der mir zu schaffen macht :D
Hab gerade an etwas anderes gedacht..
Wenn ich .css nutze, auf z.B. die Oberste div.. Kann ich dann einen css code, wie in einer externen css schreiben oder bin ich auch an eine bestimmte Schreibweise gebunden?
//EDIT:
Sofern niemand eine bessere Lösung hat, kann dies Thema geschlossen werden.. Hier meine Lösung:
Die externe .css- Datei einfach via Jquery / Javascript in der Funktion laden und dann in den Head bereich einfügen ;)
function wrap(){ var myStylesLocation = "online link zur Datei.css"; $('<style type="text/css"></style>') .html('@import url("' + myStylesLocation + '")') .appendTo("head"); }
Beitrag zuletzt geändert: 4.7.2012 7:36:15 von kill-a-teddy -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
