css hover effekt geht nicht...warum?

Ich bin gerade am html/css/php lernen und bin auf ein total simples Problem gestoßen, welches ich aber bei bestem willen nicht gelöst bekomme.

Die Pseudoklasse :hover will einfach nicht tun....

Das ist die style.css.

.navigation_schrift{
    display:block;
    float:left;
    text-align: center
    font-family: courir;
    font-size:150%;
    width: 100%;height:40px;
    color: red;
    background-image: url("../images/aquabutton1.gif");
    margin: 0px 0px 3px 0px;
    text-decoration:none;
}

.navigation_schrift:hover{
    color: green;
}

und so wird das ganze aufgerufen:

Testtext

Alles andere was ich über CSS mache funktioniert einwandfrei (wenn ich es richtig gemacht habe :D)

Warum wechselt die Schriftfarbe bei mouseover nicht auf grün?

Ich habe sowohl Firefox 5.0.1 als auch IE9 versucht...

Gruß BluBb_mADe

6 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

CodeFlatter

07.08.2011, 21:51

Soweit ich weis, ist :hover nicht alleine einer CLASS zuordnungsfähig, es muss der HTML-Tag angegeben sein.

div.navigation_schrift:hover{
    color: green;
}

mit dem div-Container zusammen sollte das dann funktionieren.

BluBbmADe

Fragesteller

07.08.2011, 22:01

Jetzt funktioniert es.

Warum das weder auf SelfHTML noch in verschiedenen Tutorials erwähnt wird ist mir schleierhaft.

Vielen Dank!

CodeFlatter

07.08.2011, 22:03

@BluBbmADe

Gerne und auch Dank für den Stern. ;)

derwendtde

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Webseite

07.08.2011, 23:02

Hi. Mein Beitrag zur Klärung / Ergänzung:

Steffile geht wahrscheins davon aus, dass es vor allem Sinn macht, Links bzw. "Anker" mit :hover zu bestücken. Und weil das Anker-Element in HTML mit "a" notiert wird, kam wohl der Vorschlag.

.navigationschrift a wäre irgend ein Link in einem klassifizierten Element (zB "DIV", "UL" oder "LI"), welches die Klasse navigationschrift hat.

<div class="navigationschrift" style="…irgendwas…">
    <a id="zuFormatierenderAnker">Linkt-Text</a>
</div>

Dabei wäre es egal, wie tief die Schachtelung gehen muss, bis das "A"-Element angesprochen wird. Jedenfalls macht das Leerzeichen in diesem Vorschlag Sinn.

Um ein "A"-Element direkt eine Ebene unterhalb von ".navigationschrift" anzusprechen, müsste es so notiert werden:

.navigationschrift>a {
    …irgendwelche Styles für normale Links
} /* oder auch mit Leerzeichen, das ist egal */
.navigationschrift > a:hover {
    color: green;
}

Dein Vorschlag a.navigationschrift würde bedeuten, dass das "A"-Element selbst die Klasse "navigationschrift" hat. Klasse und Element sind also "auf gleicher Ebene". Das Beispiel von Steffile hingegen hat mit Vererbung zu tun, dem Grundkonzept von CSS.

a.* oder a.[Leerzeichen] können nicht funktionieren, weil dies zwei Zeichen sind, mit denen eine CSS-Klasse nicht beginnen darf.

So. Jetzt mal was GANZ anderes…:

Es kann in bestimmten Fällen dazu kommen, dass :hover ignoriert wird, wenn die Reihenfolge der Notaton von Pseudoklassen nicht eingehalten wird. Diese ist:

:link – :visited – :focus – :hover – :active

siehe dazu auch http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active

BluBbmADe

Fragesteller

07.08.2011, 23:21

Bei meinem a.* war das "*" nur als Platzhalter für die nachfolgende Class gedacht :D

Das da kein Leerzeichen stehen darf is auch mir klar.

Mit Leerzeichen meinte ich nur das Leerzeichen hier:

.navigationschrift a:hover

(Leerzeichen lassen sich so schlecht fett darstellen ;-))

Das GANZ andere is auch GANZ wichtig!

Danke dafür!

derwendtde

07.08.2011, 23:34

@BluBbmADe

Ah jetzt ja! …Eine Insel… Dann wären ja alle Klarheiten beseitigt und alle sind glücklich :-)

CodeFlatter

08.08.2011, 10:58

Sauber, DH! War auch für mich noch an einer Stelle lehrreich. Ich bedanke mich auch. :-)

robbi12344

08.08.2011, 08:07

du hast aber noch einen fehler: "text-align: center" muss "text-align: center;" sein

BluBbmADe

Fragesteller

12.08.2011, 17:45

xD jaa das ist dieser komische codeblock von GF gewesen

Raven27

08.08.2011, 20:45

Hi BluBbmADe! :) (toller Name!:)

Erstens: "font-family: courir" -> Bessere diesen Punkt in "courier" aus.Fehler verzeiht CSS nicht ;)

Zweitens: "text-align: center" -> Vergiss niemals mit ";" abzuschließen, sonst "rechnet" das Stylesheet weiter ohne den Befehl auszuführen!

Drittens: das "text-decoration: none;" weglassen.

Die Hover-Funktion stimmt soweit. Viel Glück und gib bescheid ob es geholfen hat!

BluBbmADe

Fragesteller

12.08.2011, 17:45

Die Fontfamlily funktioniert einwandfrei ...?

warum drittens?

Ich will keine Textdecoration...

Steffile

07.08.2011, 21:46

versuchs mal mit .navigationschrift a & .navigationschrift a:hover, d.h. benutz a.

BluBbmADe

Fragesteller

07.08.2011, 21:54

was meinst du mit a?

a.navigationschrift?

leerzeichen werden gar nicht akzeptiert...

a.* wird auch nicht akzeptiert ... es wäre nett wenn du dich genauer ausdrücken könntest, da die aus deiner antwort resultierenden möglichkeiten doch sehr viel interpretationsspielraum lassen

Hallo,

- etwas dringend -

ich bin noch Anfängerin und möchte folgenden Effekt erreichen:

wenn ich mit der Maus über irgendeinen Bereich in der Spalte (column, s.u,.) gehe, dann sollen sich die Farben ändern: Hintergrund und p-Text (background: / color:) ist kein Problem. Aber ich habe eben auch eine Headline und einen Button da drin, deren Farben sich ebenfalls ändern müssten, da es sonst nicht mehr lesbar ist.

Ich weiß aber nicht wie ich das richtig anspreche. Einzeln hover-Effekt hinzufügen ist sinnfrei.

Mir würde es auch reichen, wenn sich z.B. einfach alle Farben in der Spalte invertieren oder irgendetwas anderes. Vielleicht ist der hover: Ansatz ja auch falsch? Google hat leider nicht geholfen bisher....

#plan .column:hover {

transform:scale(105%);

box-shadow: 0px 0px 40px rgba(0, 0, 0, .3);

background-color: #FF4772;

color: #C6EBE9;

}

So sieht es bis jetzt aus. Headline schlecht lesbar und den Button sieht man gar nicht

...zur Frage

Html / Css Text auf Header bzw. Div-Container Text über Hintergrund?

CSS formatiert die Schrift so, dass immer der ganze Querbalken über dem Hintergrund nicht transparent ist. Wie mache ich das? ** Siehe Grafiken **

h1 { font-family: arial, verdana, helvetica; font-size: 40px; font-weight: 200; }

header { position: relative; height: 200px; display: block; background-color: black;

} nav { width: 500px; height: 200px; background-color: aqua; }

...zur Frage

CSS bei Hover anderes Element verändern?

Ganz ohne JavaScript

Mit dem Code unten kann ich beim hovern auf container1 die Hintergrundfarbe von container2 ändern weil er in container1 drinnen ist

aber geht es nicht auch so das ich den Body Hintergrund auf grün oder so ändern kann ?

    #container1{
            height: 50vh;
            background-color: blue;
        }
        #container2{
            height: 25vh;
            width: 100%;
            background-color: red;
        }
        #container1:hover #container2{
            background-color: green;
        }
    <div id="container1">
            <div id="container2"></div>
    </div>

...zur Frage

WIe kann man in diesen CSS Code den Text auf einer Website mittig einstellen?

Hallo Leute,
ich hab ein problem und wollte mal nachfragen.

Ich habe diesen CSS code für meine Website genutzt.(Es soll zum Schluss eine art taskleiste mit Willkommen. über uns usw. werden )
Nur meine frage ist, wie kann man in diesen CSS Code einstellen. Dass dieser Mittig sitzt von der Website? Kann mir jemand evtl. helfn den code umzuschreiben?
das wäre der Code::

/* ----- CSS Nav Menu Styling ----- */

#cssnav {

margin: 10px 8px 4px 12px;

padding: 0px 0px 0px 0px;

width: 1050px; /* Set your width to fit your blog */

p { font-size: 18px } $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */

color: $(tabs.text.color); /* Template Designer - Change Font Size */

text-align: justify;

}

#cssnav ul {

background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;

_background-image: none; /* Template Designer - Change Menu Background */

height: 20px; /* Change Height of Menu */

list-style: none;

margin: 0px;

padding: 0px;

}

#cssnav li {

float: left;

padding: 0px;

}

#cssnav li a {

background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;

_background-image: none; /* Template Designer - Change Menu Background */

display: block;

margin: 0px;

font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */

text-decoration: none;

}

#cssnav > ul > li > a {

color: $(tabs.text.color); /* Template Designer - Change Font Color */

}

#cssnav ul ul a {

color: $(tabs.text.color); /* Template Designer - Change Color */

}

#cssnav li > a:hover, #cssnav ul li:hover {

color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */

background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */

text-decoration: none;

}

#cssnav li ul {

background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;

_background-image: none; /* Template Designer - Change Menu Background */

display: none;

height: auto;

padding: 0px;

margin: 0px;

position: absolute;

width: 200px; /* Change Width Of DropDown Menu */

z-index:9999;

}

#cssnav li:hover ul {

display: block;

}

#cssnav li li {

background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;

_background-image: none; /* Template Designer - Change Background */

display: block;

float: none;

margin: 0px;

padding: 0px;

width: 200px; /* Change Width Of DropDown Menu */

}

#cssnav li:hover li a {

background: $(tabs.selected.background.color); /* Template Designer - Change Background of Link on Hover */

}

#cssnav li ul a {

display: block;

height: auto;

margin: 0px;

padding: 10px;

text-align: left;

}

#cssnav li ul a:hover, #cssnav li ul li:hover > a {

color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */

background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */

border: 0px;

text-decoration: none;

}

...zur Frage

Wie kann ich diese Navbar fixieren?

Hallo,

ich mache gerade meine erste Website und kenne mich noch sehr wenig mit HTML/CSS aus. Ich schaffe es leider nicht, dass meine Navigation beim runter scrollen oben fixiert bleibt. Wie kann man das ausschließlich mit HTML und CSS (also kein Javascript oder so) beheben?

Hier der HTML-Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Unser Shop</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>


<body>


<div class="topnav">
  <img src="test.png" alt="test" width="100" height="40" style="float:left; margin-right:25px;">
  <a class="active" href="index.html">Willkommen</a>
  <a href="products.html">Unsere Produkte</a>
  <a href="about-us.html">Über uns</a>
</div>


<div class="page">
<p> Willkommen! </p>
</div>




</body>
</html>

Und hier der CSS-Code:

body {
  background-color: green;
  margin: 0px;
}


/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}


.page {
  background-color: white;
  margin-right: 125px;
  margin-left: 125px;
  padding-bottom: 85%;
}

...zur Frage

Wie kann man in HTML einen Wrapper erstellen?

Das ist meine Menüleiste:

* {
  padding: 0px;
  margin: 0px;
}

#menu {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 40px;
  width:100% - 36px;
  background: #2d2d2d;
  padding-top: 2px;
  padding-left: 36px;
}

#menu ul li {
  list-style: none;
  color: #bbbbbb;
  font-size: 10pt;
  font-family: Arial;
  line-height: 27px;
  padding: 0 8px;
  display: inline;
  font-weight: bold;
}

#menu ul li:hover {
  color: #fff;
}

Darunter soll der Wrapper kommen.

...zur Frage

CSS: Wie kann ich die Unterlinie des Texts wegbekommen?

Hallo. Irgendwie geht die text-decoration bei mir nicht weg. Bitte helft mir.

HTML:

 <button class="cn"><a href="#">create</a></button>

CSS:

.cn {
  text-decoration: none;
  width: 160px;
  height: 40px;
  background: #23002f;
  border: none;
  margin-bottom: 10px;
  margin-left: 20px;
  font-size: 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: .4s ease;
  margin-left: 350px;
  margin-top: 5px;
}

...zur Frage

css: Banner ganz oben bei der Website erstellen?

ich möchte einen banner wie hier diesen grünen erstellen, der auf der Seite ganz oben und 100% breit ist. doch wie geht das ?

hiermit verschiebt er die Seite nicht nach unten sondern es wird dahinter angezeigt :

.mybanner{
	background-color: red;
	padding-top: 40px;

}

...zur Frage

CSS + Hover + WP - Wie gleichzeitig Rahmen & Text hovern?

Hallo Community :)

Ich habe einen Rahmen mit Text (ein Link)

Wenn ich mit der Maus über den Rahmen gehe kommt ein Hover-Effekt (Rahmen-Farbe verändert sich).

Wenn ich dann weiter in die Mitte des Rahmens gehe bis zum Text (ein Titel mit Verlinkung), dann verändert er erst seine Text-Farbe

Ich möchte aber, dass sobald ich den Rahmen mit der Maus berühre, dass sowohl Rahmen UND Text den Howereffekt bekommen

Habt Ihr dafür eine Lösung?

.rahmen { border: 8px solid blau; }

.text a { color: blau; padding 40px 40px 40px 40px; }

.rahmen:HOVER { border: 8px solid rot; }

.text a:HOVER { color: rot; }

...zur Frage

HTML,CSS Dark/White mode?

Moin, Ich habe ein Dark/White mode gemacht aber irgendwie wechselt er nicht die font-color zu weiß wenn ich ihn den darkmode gehe.Vielleicht wäre jemand so Nett und würde mit genau sagen wo was hin muss.
LG

HTML:

CSS:

...zur Frage

HTML/CSS-Button(Bild ändern)?

Hallo, ich arbeite gerade an einen Button. Aber wie kann ich dieses Herz durch ein Bild ersetzten?

.icon{

background-color: white;

color: #00472d;

border: none;

font-size: 2rem;

padding: 0.5em;

line-height: 1;

width: 2em;

transition: border-radius 2s ease;

}

.icon:hover{

background-color:#00472d;

color: white;

border-radius: 50%;

...zur Frage

Kann jemand diesen Button in HTML CSS umwandeln?

Hallo,

schafft es jemand, mir diesen Button in HTML und CSS zu machen?

Border color ist #f5bf8c

Font color ist #363639

Gradient links ist #fdc591

Gradient recht ist #cd9969

Und dann ist da noch so ein kleiner Schatten nach außen (gold) und nach Innen ein kleiner, schwarzer Schatten

...zur Frage

Warum kann ich meinen Tabellenrahmen mit CSS nicht entfernen?

Moin,

ich habe mir in HTML eine Tabelle zurechtgebastelt und mit CSS designed. Da das Projekt recht umfangreich und unübersichtlich ist, ist es schwierig, den Code hier zu zeigen. Jedenfalls funktioniert in CSS die Funktion border-collapse sowie background-color, aber bezüglich des Rahmens funktioniert ansonsten nichts. Ich kann die Farbe, den Style und die Width nicht anpassen. Ziel ist den Rahmen zu entfernen, das funktioniert aber weder mit border-width: 0px; noch mit border: 0;.

Ich habe absolut keine Vorstellung woran es liegen kann, das CSS teilweise funktioniert. Cache habe ich immer gelöscht.
Außerdem habe ich es über table als Selektor sowie über die id mit # versucht, bei beiden ist das Ergebnis gleich,

Hat jemand eine Idee, was der Fehler sein könnte?

LG und vielen Dank

Tim

...zur Frage

Css Element mit position:fixed überdeckt Elemente?

Ich habe in CSS eine Navigationsbar mit der Eigenschaft position:fixed, da ich möchte, dass sie mitkommt beim Scrollen. Jedoch überlagert sie am Anfang ebenso etwas, was ich eben nicht will.

Demnach ist meine Frage, wie ich das ganze so mache, dass die Navigationsleiste zu Beginn nicht schon ein Element überdeckt.

Navigation:

.nav{
  position: fixed;
  font-family: 'Oswald', sans-serif;
  text-align: center;
  background-color: #4A9188;
  color: #ffffff;
}

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen