hover bereich auf background eingrenzen

krischan23

heyho,

in einem menu lade ich beim rollover über einen menupunkt (gelber thumbnail) eine etwa viermal so große grafik wie die ausgehende link-grafik.

ich lade also über :hover die große grafik, leider bleibt diese (hover-)grafik allerdings komplett bestehen während die maus darüberfährt.
ich möchte aber, dass sie nur solange bestehen bleibt, solange die maus in dem gelben bereich der ursprünglichen link grafik bleibt.

wie kann ich das mittels css erreichen?
irgendwie finde ich keine lösung. oder steh ich nur auf dem schlauch?

gruß,
krischan

Bleistift

WENN ich dich jetzt richtig verstehe willst du das sich beim hovern die Grafik verändert und wenn du mit dem Mauszeiger wieder "woanders hingehst" soll die Grafik zurück gehen?
Wenn dem so ist:

Würde ich das Problemchen mit CSS+HTML Tabellen lösen.
Auch wenn das Tabellenlayout veraltet ist, find ich es für solche Problem für die richtige Lösung.

Das könnte so aussehen:

HTML

<html>
<head>
<title></title>
<link href=".css" rel="stylesheet" type="text/css">
</head>
<body>
 <table height="100%" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>1. Kasten</td>
<td>rechts neben 1. Kasten</td>
<td>rechts neben 2. Kasten</td>
/ beliebig viele Kästen hinzufügen /
</tr>
<tr>
<td>1. Kasten 2. Reihe</td>
<td>rechts neben 1. Kasten 2. Reihe</td>
<td>rechts neben 2. Kasten</td>
/ beliebig viele Kästen und Reihen hinzufügen /

Alles anzeigen

Die Tabelle ist so ausgerichtet das sie 100% deines Browserfensters einnimmt.
Wenn du das ändern willst, kannst du dies bei <table width="" height="">
Pixel oder Prozent
Per cellspacing kannst du die Kästen belieb weit auseinander treiben
So deine CSS sollte dann für dein hover-Wunsch in etwa so aussehen:

Code

td {
background-color: White;
color: Black;
font-size: 0em;
}


td:hover {
background-color: Orange;
color: White;
font-size: 1.2em;

Alles anzeigen

Die Änderung von font-size würde nun bewirken, dass keine Schrift im Normalzustand zusehen ist,
erst wenn eine Spalte/Zeile gehovert wird
Die Farbe ändert sich beim Hovern von Weiß nach Orange.
Dies kannst du alles beliebig anpassen
Solltest du mehrere verschiedene Wünsche haben dann setzt das ganze mit .class um
(td.first { ... } td.first:hover {...} td.second { ... } td.second:hover { ... })

Hoffe es konnte dich deiner Realisierung näher bringen

Wenn nicht dann müsstest du dich für ne ordentliche Hilfe etwas besser ausdrücken
Dein Bild erklärt mir nämlich auch nicht viel mehr als dein Text ?!

Wenn du jetzt jedoch meinst, dass die Grafik1 beim hoveren vergrößert werden soll, und zurück zur Grafik1 gehen soll wenn die ursprüngliche Grafik1 nicht mehr gehovert wird dann würde ich das mit spans lösen, wobei das sehr veraltet ist. Mir fällt dazu aber nichts neues ein Kannst ja mal bei HTML5 gucken ob es da was neues gibt
Ansonsten, wie gesagt Element oder Tabelle erstellen + span und den span dann vergrößern

krischan23

hey, danke für deine mühe, aber leider klärt das mein problem nicht. hab es vielleicht nicht klar genug beschrieben...
also nochmal:

mein menu sieht aus wie das bild oben: 16 thumbnails á 80 mal 50px. das hab ich auch schon so, wie ich es will.
wenn nun ein thumb ein rollover erfährt, z.b. das gelbe, wird ein neues bild geladen, dass die anderen thumbs verdeckt (360 mal 200px - komplette größe). jetzt bleibt dieses bild aber bestehen, während die maus auf dem ganzen bild sich befindet. und ich hätte gerne, daß wenn die maus den gelben bereich verläßt, dann das große bild verschwindet und die anderen thumbs wieder sichtbar werden.

code-fragment für das linke obere thumbnail sieht folgendermaßen aus:

Code

ul#menu-thumbmenu.menu .thumb_1 {
    position:absolute;
    width:80px;
    height:50px;
    background-image:url("images/thumb1.jpg");
    background-repeat:no-repeat;
    z-index:5;
}


ul#menu-thumbmenu.menu .thumb_1:hover {
    /*width:80px;
    height:50px;*/
    position:absolute;
    width:360px;
    height:200px;
    background-image:url("images/full_thumb1.jpg");
    background-repeat:no-repeat;
    z-index:15;    
}

Alles anzeigen

ich hatte gedacht, ich könnte den :hover-code auch in größe auf 80 mal 50px reduzieren und mittels

Code

overflow:visible;

das zu ladende bild ganz anzeigen lassen in voller größe (360 mal 200px), aber das klappt nicht.
oder einen weiteren bereich definieren, der mittels

Code

z-index:10;

zwischen den anderen beiden liegt und beim hover das komplette große bild lädt, ohne selbst die hover-eigenschaft zu haben (die dann eben nur für den kleinen bereich definiert wird), aber irgendwie krieg ich das alles nicht hin.
achja, das sollte idealerweise alles im css gelöst werden.

Bleistift

Mit rein CSS funktioniert das glaube ich nicht
Aber wie gesagt mit Spans wärs ne Möglichkeit

Code

ul.span {
...
}


ul.span:hover {
...
}


ul.span span {
display: none;
}


ul.span:hover span {
display: block;
top: ;
left: ;
width: ;
height: ;
position: ;

Alles anzeigen

HTML

<ul class="span"><span>Content vom Span</span></ul>

Die Positionsangaben von dem Span gehen aus von der kleinen Grafik
Sprich top, left: 0 -> Links oben direkt bei Grafik1

Andere Lösung kenn ich dafür nicht

Wobei man sagen muss das spans eine beschi***** Lösung dafür ist, weil Spans immer von dem übergeordneten Element ausgehen, bedeutet beim UL neben dem 1. kann der Span nicht die linke Seite + den Rest der Seite überdecken
Also nach meinem Wissen ist das nicht möglich, vielleicht irre ich mich vielleicht nicht.

krischan23

hmmm, das ist für mich glaub ich keine lösung...trotzdem danke.
weitergraben...

Tags