CSS Mouseover

...komplette Frage anzeigen

3 Antworten

Wenn Du mit der pseudoklasse :hover arbeitest, kannst Du nur das element über dem sich die Maus befindet verändern (es gibt ein paar tricks aber die sind eher fortgeschritten ;-) )

Wenn Du bei Mouseover ein anderes Element verändern willst, musst Du wohl oder übel auf JavaScript zurück greifen.

Um Flächen zu Verlinken benötigst Du das Element, oder wieder javascript um beliebige Elemente klickbar zu machen.

Gruß Viru

Hey.

Also normalerweise schaut das im CSS so aus:

#menu ul li:hover{
width: 200px;
height: 200px;
background-image: url(../images/bild.jpg) no-repeat;
}

Dann müsste sich auch das Bild komplett anpassen!

MfG CarolaA.

P.S.: Solltest du noch Fragen haben, dann melde dich einfach bei mir!

PeterIntro 23.10.2012, 10:44

Danke muss es zwar noch richtig ausrichten aber funktioniert :) Und wie verlinke ich jetzt etwas auf diese buttons?

MFG

0
CarolaA 23.10.2012, 11:11
@PeterIntro

Auf welche Buttons??

Zeige mir doch mal dein Grundgerüst deiner Seite (den HTML-Code)!

MfG CarolaA.

0
PeterIntro 23.10.2012, 11:24
@CarolaA

Brauche doch noch bisschen mehr hilfe: Also habe momentan so ein code im CSS:

#class1 { width:100px; height:25px; position:relative; top:-270px; left:55px}
#class1:hover 
{
color:#FFF;
top:-270px;
left:55px;
width:100px;
height:25px;
background-image:url(bild.gif)
}

Und so im html

<body>
    <img src="bild.jpg" width="740" height="300">
    <p>
    <p><font face="Arial, Helvetica, sans-serif">
    <font size=2,9>
    <br>
    <br>
    <div id="class1">1</div>
    <div id="class1">2</div>
    <div id="class1">3</div>
    <div id="class1">4</div>
    <div id="class1">5</div>
    <div id="class1">6</div>
    <div id="class1">7</div>
    </font>
    </font> `

Nun hab ich das Problem das das sich beim mouseover immer die Schrift wo anders hinbewegt bzw nicht mittig auf dem balken sitzt wie geht das? Und das verlinke ich jetzt z.b. wenn ich auf 1 drück das dort z.b. google aufgemacht wird?

MFG

0
CarolaA 23.10.2012, 11:27
@PeterIntro

Mir tun jetzt schon die Augen weh!

Bitte nie vergessen die Tags zu schließen, also schön

schreiben als erstes und dann den Rest in die Mitte der beiden schreiben!!

Du kannst dem Div selber auch eine Formatierung geben:

div#class1{
color: #fff;
text-align: center;
font-size: 45px;
font-family: Arial, Helvetica, sans-serif;
etc.}
0
PeterIntro 23.10.2012, 11:36
@CarolaA

Ja und wie mach ichs jetzt das dass bild mittig hinter der schrift sitzt ohen das sich die schrift verändert?

0
CarolaA 23.10.2012, 12:04
@PeterIntro

Gute Frage! Schau doch mal im Internet nach, was in diese Richtung ist, denn ich habe mir auch vieles so beigebracht, indem ich im Internet ein wenig recherchiert habe...aber ich schaue dir natürlich auch, aber das kann halt ein wenig dauern!

Ansonsten könntest du ja einfach mit Paint.net oder GIMP (sind Bildbearbeitungsprogramme) die Schrift gleich aufs Bild machen! wäre eine weitere Möglichkeit!

0
PeterIntro 23.10.2012, 12:23
@CarolaA

Habs mittlerweile geschafft :) Nurnoch die LInks fehlen, danke für deine Hilfe

MFG

0

Links fehlen noch? Nimm << a >> statt << div >>! Das SIND die Links im HTML! Wenn die << a >>s sich breit machen sollen wie die << div >>s, deklariere sie zu "display: block;"!

P.S.: Für diese Formatierungs-Verstümmelung muß irgendwann mal jemand an die Wand gestellt werden! Krückig ist geschmeichelt!

Was möchtest Du wissen?