Cart - Mouseover

Deutsches Forum
1

Hallo zusammen,

ich bin mal wieder frustriert.

mit normalem text geht das mouse over, damit der Wareninhalt angezeigt wird (von mini_basket).

den code hab ich mit normalem text gestetet, da gehts. wenn ich nun den code aus mini_basket integriere geht die verlinkung <a> nicht mehr.

Probier schon seit Stunden das ding zum laufen zu bringen. Aber irgendwo ist noch ein fehler drin, den ich nicht reproduzieren kann.

HTML

 <div id="showcart">
	<a href="#carty">

 	<div class="headerpic"> </div>
  

<span class="cartlist">

 [{foreach from=$oxcmp_basket->getContents() name=rightlist item=_product}]
        <div id="test_[{$_basket_testid}]Title_[{$_product->getProductId()}]_[{$smarty.foreach.rightlist.iteration}]" class="listitem rightbasketitems">
          [{ assign var="sRightListArtTitle" value=$_product->getTitle() }]
          <a id="test_[{$_basket_testid}]Pic_[{$_product->getProductId()}]_[{$smarty.foreach.rightlist.iteration}]" href="[{$_product->getLink()}]" class="picture">
              <img src="[{$_product->getImageUrl()}]/[{$_product->getIcon()}]" alt="[{ $sRightListArtTitle|strip_tags }]">
          </a>
          <a id="test_[{$_basket_testid}]TitleLink_[{$_product->getProductId()}]_[{$smarty.foreach.rightlist.iteration}]" href="[{$_product->getLink()}]" class="arttitle">[{ $sRightListArtTitle|strip_tags }]</a>
          <br>
          ( [{$_product->getAmount()}] [{ oxmultilang ident="INC_CMP_BASKET_QTY" }] )
         </div>
         [{/foreach}]
</span>
</a></div>

CSS:

#showcart a .cartlist {display:none;text-align:justify; width:20em;}
#showcart a:hover .cartlist {position: absolute; top: 50px; right: 200px;
background:#fff;
display:block;
padding:5px;
text-align:justify;
border: 1px solid;
z-index: 999;
}
2

Dein Code (stark vereinfacht):


<a href="warenkorb">
  <a href="artikel1">link im link</a>
  ..
  <a href="artikeln">noch ein link im link</a>
</a>

Links in Links sind voll ohne Funktion… bzw. wer weiß, was die so in den ganzen verschiedenen Browsern anstellen.

Versuche da mal lieber mit einer Definitionsliste (nur schematisch, ungetestet)


<dl>
  <dt><a href="warenkorb">warenkorb</a></dt>
  <dd>
    <a href="artikel1">link im link</a>
    ..
    <a href="artikeln">noch ein link im link</a>
  </dd>
</dl>

… und css


dl dd{display:none}
dl:hover dd{display:block}

… und dann noch ein wenig JS für Browser die immer noch kein CSS:hover für nicht Ankerelemente können.

3

MBa, Vielen Dank für die super schnelle Antwort.

Leider hab ich mit den Listen noch nicht gearbeitet und weiss nun nicht wie ich die css klassen dafür definieren muss.

kannst mir da ein kurzes beispiel machen?! das wäre klasse.
aber danke versuch deinen vorschlag mal umzusetzen.

die for-schleife muss ich erhalten lassen.

4

So?

[QUOTE=MBa;14055]
… und css


dl dd{display:none}
dl:hover dd{display:block}

[/QUOTE]
Wenn Du unbeding eine Klasse dabei habe willst, dann (von Deinen Beispiel abgeleitet):


dl .cartlist{display:none}
dl:hover .cartlist{display:block}

oder besser


dl dd.cartlist{display:none}
dl:hover dd.cartlist{display:block}

ich persölich bevorzuge


dl#showcart dd{display:none}
dl#showcart:hover dd{display:block}

Das HTML muss dann natürlich dementsprechend sein…


<dl id="showcart">
  <dt><a href="warenkorb">warenkorb</a></dt>
  <dd class="cartlist">
    <a href="artikel1">link im link</a>
    ..
    <a href="artikeln">noch ein link im link</a>
  </dd>
</dl>

Immer mal ein Blick wert.

5

MBa, herzlichen Dank. Hast meinen Horizont wieder bissl erweitert. Aber mit meinen Skills ist das wohl auch notwendig :wink:

Leider funzt es im IE7 nicht ganz. Der Hintergrund scheint durch die Box durch. Gibts hier ne Lösung?

Also nochmal: Vielen Dank und gute Nacht.

6

So?

css:
background:black;

7

Musste das service menü, das auch mit dl gemacht ist, umbauen (divs). denn im IE funktioniert das z-index nicht, wenn ebenen überlagert sind.

im IE hab ich noch eine rießen lücke und keine ahnung woher die kommt…
naja, das lass ich jetzt mal so :wink:

8

ist das umsetzen von onclicks auch mit den listen zu empfehlen?

9

[QUOTE=MBa;14055]
… und dann noch ein wenig JS für Browser die immer noch kein CSS:hover für nicht Ankerelemente können.[/QUOTE]

hab auf selfhtml geschaut. das können im prinzip alle Browser ab IE 3, Firefox 1und Opera 5.

Egal, wie hättest Du das umgesetzt?
Ein OnMouseover zusätzlich auf auf das <a> tag gelegt?

10

[QUOTE=racoon;14082]hab auf selfhtml geschaut.
[/quote]
Sorry, fürs Nichtantworten. Aber so lernt man am besten :wink:

das können im prinzip alle Browser ab IE 3, Firefox 1und Opera 5.

Ich lese bei css4you etwas anderes. Spielt auch meine Erfahrungen wieder.

> Leider unterstützen Opera und der Internet Explorer bis zur Version 6 :hover nur für <a>-Tags.

Egal, wie hättest Du das umgesetzt?
Ein OnMouseover zusätzlich auf auf das <a> tag gelegt?

Ich hätte versucht das CSS nachzubilden… Kann ja sein, das um den Anker (innerhalb des dt-Elements) noch irgendwelche Texte/Elemente hinzukommen. So bleibt das Verhalten auch dann gleich.


dl#showcart dd{display:none}
dl#showcart:hover dd{display:block}

… also das dl Element.
Oder dt, wenn dd wegen irgendwelcher Positionierung keine Ausmaße hat. Dies sollte man aber vermeiden können.
War dummfug, das dl-Element. Bei dt wird wenn man auf das dd-Element geht ja das mouseout-Event für dt ausgelöst… Würde zwar gehen mit einer zusätzlichen dd:hover Klasse, ist aber echt dreckig.

11

danke für deine antwort. Ich versteh deine hilfe in letzten abschnitt leider überhaupt nicht, was du damit meinst.

“…also das dl Element”?

12

[QUOTE=MBa;14090]Ich hätte versucht das CSS nachzubilden…
… also das dl Element.[/QUOTE]

Im CSS steht:
dl#showcart:hover…

Dieses DL-Element meinte ich.
Dann implementierst Du das gleiche Verhalten mit JS welches Du auch mit CSS hast.

13

das dl-element, das ich im css “designe” belege ich zudem mit einer JS (on-irgendwas)?!

wenn jedoch das JS ausgeschalten ist, fehlt doch das ganze element, oder nicht?