inline CSS + hover

[pad8626]

Hallo ich möchte gerne einen Link mit einem Hover Effekt erstellen...

Ist ja nicht schwer! Aber in meinem Fall schon...

Szenario:

Ich habe ein Shopsystem wo Komponenten eingefügt werden können (Bild, HoverBild , Link ...) . Diese Komponenten haben ein Template wo dann dynamisch die Parameter eingefügt werden.

Template:

<div class="imageteaser area" style="width:560px;">
	<div style="position:relative; top:0px; left:0px; height:200px;">
	  <div class="hoverTeaserBasic" style="position:absolute; z-index:3; top:0px; left:0px;" onmouseover="this.style.z-index = '1';" >
	  	<isif condition="#isDefined(Product)#">
			<a href="#URLEX(InsecureURL,'',Action('ViewProductDetail-Start'),Parameter('ProductUUID',Product:UUID),Parameter('CatalogCategoryID',Product:DefaultCatalogCategoryID),Parameter('JumpTo','OfferList'))#"  >
				<img src="#stringToHtml(basic)#" alt="<isprint value="#Product:Name#">" />
			</a>
		<iselseif condition="#isDefined(Category)#">
			<a href="#URLEX(InsecureURL,'',Action('ViewStandardCatalog-Browse'), Parameter('CatalogCategoryID',Category:UUID))#">
				<img src="#stringToHtml(basic)#" alt="<isprint value="#Category:DisplayName#">"  />
			</a>
		<iselse>
			<img src="#stringToHtml(basic)#" alt="Teaser Image"/>
		</isif>
	   </div>
	
	  <div class="hoverTeaserHover" style="position:absolute; top:0px;  z-index:2; left:0px;">
	  	<isif condition="#isDefined(Product)#">
			<a href="#URLEX(InsecureURL,'',Action('ViewProductDetail-Start'),Parameter('ProductUUID',Product:UUID),Parameter('CatalogCategoryID',Product:DefaultCatalogCategoryID),Parameter('JumpTo','OfferList'))#"  >
				<img src="#stringToHtml(hover)#" alt="<isprint value="#Product:Name#">" />
			</a>
		<iselseif condition="#isDefined(Category)#">
			<a href="#URLEX(InsecureURL,'',Action('ViewStandardCatalog-Browse'), Parameter('CatalogCategoryID',Category:UUID))#">
				<img src="#stringToHtml(hover)#" alt="<isprint value="#Category:DisplayName#">" />
			</a>
		<iselse>
			<img src="#stringToHtml(hover)#" alt="Teaser Image" />
		</isif>
	   </div>
	</div>
	
	
</div>

--> es sind zwei Container mit jeweils einem Bild diese überlappen sich

alles was in ## eingefasst ist sind die Variablen nicht wundern da ist noch ein wenig ISML Syntax dazwischen diese einfach ignorieren.

Meine Idee war es erst mal den z-index zu ändern beim hover aber das funtzt anscheind nicht oder??

Andere Idee ist dann noch einfach die bilder in den background zu packen und dann per hover den background auszutauschen... Dazu müsste ich allerdings das hover in ..style="".. zu schreiben... Kann man hier überhaupt hover definieren??

Noch ne Idee ist visibility auf hidden zu setzen das flackert aber...

Langsam gehen mir die Ideen aus hat jemand eine Idee?? Ich kann kein CSS in den Head schreiben!! ich kann zwar die CSS Datein die importiert werden bearbeiten das würde allerdings auch nur bei der z-index Variante was helfen...

 

[anna55]

Probier's mal mit

onmouseover="this.style.zIndex = 1;"