Mouse over Effekt erstellen

[ullihantke]

Mouse over Efeckt erstellen

Hallo Freunde,

ich würde gerne folgendes erstellen.

Ich habe mehrer Produkte (Bilder und Text) in einem div drin und möchte gerne, dass wenn man mit der Mouse auf dieses Element geht (ohne klicken) ein Rahmen ensteht bzw. dieses div evtl. etwas vorkommt.

Ist sowas möglich?

Vielen Dank

 

[Myhar]

AW: Mouse over Efeckt erstellen

Ja, das ist möglich. Du kannst hier mit der :hover Pseudoklasse arbeiten.
Im Prinzip sieht das folgendermaßen aus, du musst das nur an deinen eigenen Code anpassen

<div class="onHover">
<!-- Bild + Text hier drinnen -->
</div>

.onHover:hover{border:2px solid red;}

 

[woffi]

AW: Mouse over Efeckt erstellen

Ja,
mit CSS relativ leicht, das Stichwort ist hover. Sie Dir mal z. B. http://www.css4you.de/hover.html an.

 

[teste123]

hallo zusammen
hie kannst du das lesen
http://www.on-mouseover.de/frameset_mouseover.html

https://www.youtube.com/watch?v=gZnZvIQFbEg

 

[Pionierbrigade70]

AW: Mouse over Effekt erstellen

Ich wollte eigentlich noch fragen mit welchem Programm soll der Effekt erstellt werden.
Gehe aber davon aus wenn es CS von Adobe ist dann arbeites du mit Dw oder?
Wenn das der Fall sein sollte dan steht es in der Hilfe sehr gut beschrieben.

M.f.G.

 

[ullihantke]

AW: Mouse over Effekt erstellen

Hallo Pionierbrigade70 (langer Name)

ich nutze Aptana Studio3.

In welcher Hilfe kann ich dies finden?

 

[Myhar]

AW: Mouse over Effekt erstellen

Das Programm ist egal, da der Effekt mit CSS erstellt wird und man somit nur einen Texteditor braucht um eine CSS Datei zu bearbeiten. In habe ich eine Lösung für dich gepostet, hat dir die nicht weitergeholfen?

 

[cebito]

AW: Mouse over Effekt erstellen

deinem ersten Thread

Genau, ein Thema reicht... hab das mal zusammengetackert

 

[ullihantke]

AW: Mouse over Effekt erstellen

ich habs... DANKE

 

[Vagant]

AW: Mouse over Effekt erstellen

Funktioniert das denn auch mit einem Bild das beim drüberfahren angezeigt wird?
Also eine Kleine darstellung eingestellt nd beim drüberfahren mit der maus wird das größere Bild angezeigt.

 

[Myhar]

AW: Mouse over Effekt erstellen

Natürlich, aber nur mit der CSS Eigenschaft background-image. Von einem <img> kannst du das src Attribut nachträglich nur per Javascript ändern. Du kannst, wenn du mit img Tags arbeitest, das große Bild einbinden, verkleinert darstellen und bei hover die ursprüngliche Größe anzeigen. Diese Lösung ist aber nicht ideal, da alle großen Bilder geladen werden und der User sich eventuell nicht für alle interessiert.

Variante 1

<div class="hover">
<span> </span>
</hover>

span {background-image: url(Pfad/zum/kleinen/Bild.jpg) ;}
.hover:hover span{background-image: url(pfad/zum/großen/Bild.jpg);}

Variante 2

<img src="Pfad/zum/großen/bild.jpg" class="hoverImg" alt="Sinnvoller Alt Text"/>

.hoverImg{width:100px;height:100px;display:block;}
.hoverImg:hover{width:300px;height:300px;}