[CSS] OnMouseOver nur mit CSS

[asseskiller]

Hi leute,

nen freund von mir hat mir erzählt, das man so einen onmouseover-effekt nur mit CSS machen kann.
das ergebnis soll so sein.

Wichtig ist, das informationen sozusagen in einen unsichtbaren div geschrieben werden, und wenn man über dieses bild geht, das so wie im beispiel aussieht.

Geht sowas nur mit CSS?

 

[Mr. Snoot]

Was für ein Bild meinst du denn? Ich seh da nichts, was einen Mouse-Over-Effekt hat.

 

[Bergfruehling]

Geht auch so:

<a href="index.htm"    
onmouseover="document.images['bild_01'].src='parts/head_homepage_02.jpg'"
onmouseout="document.images['bild_01'].src='parts/head_homepage_01.jpg'">
<img alt="" name="bild_01" src="parts/head_homepage_01.jpg" 
border="0" height="20" hspace="0" vspace="0" width="98">

siehe: http://www.hinterhofgriller.de.vu/

 

[asseskiller]

@Bergfruehling
Die sache ist ich will nicht nur nen Bild "onMouseOvern" sondern auch nen text und ich will ja auf JS verzichten

@mr. snoot
du musst da erst nen Tarif oder handy auswählen. Gehst du dann über das bild, was rechts daneben erscheint, dann erscheint nen onmouseover-effekt.

 

[darkarchon]

.klasse :hover { bla }
.klasse { bla }

 

[PW-toXic]

Die sache ist ich will nicht nur nen Bild "onMouseOvern" sondern auch nen text und ich will ja auf JS verzichten

Wieso willst du auf JS verzichten? Gibts dafür einen Grund?

Ansonsten kann man das was du machen willst nicht CSS nicht machen, wenn ich richtig verstanden hab was du machen willst.

mit CSS mouseover (hover) kannst du nur css style eigenschaften ändern.
Mit ein paar tricks kann man auch eine ausklappbare subnavbar damit machen, aber da find ich javascript sinnvoller.

 

[asseskiller]

Ich weiß warum ich javascript nicht nutzen will.
Weil ich selbst es regelmäßig ausstelle und ich genug leute bei mir an der uni kenne, die das auch machen.

 

[PW-toXic]

Dann bekommst du von mir an dieser Stelle ein herzliches Beileid.

Warum schaltest du eigentlich nicht gleich HTML und CSS aus?
CSS kann man ausschalten - bei HTML bin ich mir nicht so sicher.

 

[Hanni2k]

such bei google mal nach css popups oderso, man erstellt im css für ne <a> tag ne formatierung und wenn man man dann bei <a> mit der maus draufgeht wird ein entsprechendes <span> tag zb. angezeigt.

 

[Adagio]

http://www.cssplay.co.uk/menu/ ... da gibts massig Beispiele, wie man das mit CSS machen kann.

 

[hurga_gonzales]

Es ist halt so, dass die CSS Lösungen "hover" verwenden. Das kannst Du auch gerne so machen und musst dazu kein JS heranziehen. Allerdings musst Du Dir im Klaren darüber sein, dass damit ältere IE nicht zurecht kommen.

 

[Adagio]

Allerdings musst Du Dir im Klaren darüber sein, dass damit ältere IE nicht zurecht kommen.

Alle IEs unterstützen :hover auf <a> ... inwiefern kommen die damit dann "nicht zurecht"?

 

[asseskiller]

Hmmm hab das jetzt versucht so zu lösen

Stylesheet:

a.details_1 span.device_box_1{
   visibility:hidden;
   display:none;
   width:300px;
   position:absolute;
   left:0px;
   text-align:left;
   font-size: 10px;
   z-index:2; }

a.details_1:hover span.device_box_1{
   visibility:visible;
   display:block;
   opacity: 0.99;
   filter: Alpha(opacity = 99);
   border:1px solid #000000;
   padding:10px;
   background:white;
   style:z-index:2;
	}

HTML

<a class="details_1" href="#"><img src="testbild_klein.jpg" class="img_small_handy_1"></a><br>
<span class="device_box_1"><img src="testbild_gross.jpg" class="img_large_handy_1"><br><br>
Testbeschreibung</span>

Es geht aber nicht es wird die beschreibung schon im vorfeld angezeigt.

Hat jemand ne ahnung wo der fehler ist?

 

[asseskiller]

FEHLER SCHON SELBST ERKANNT:

das </a> muss den versteckten tag umschließen