Ergebnis 1 bis 5 von 5

Thema: hover bereich auf background eingrenzen

  1. #1
    Azubi(ne)
    Registriert seit
    13.03.2011
    Beiträge
    56
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard hover bereich auf background eingrenzen

    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.

    full_thumb.jpg

    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Samurai Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    21
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: hover bereich auf background eingrenzen

    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-Code:
    <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 /
    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;
    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 ^^
    Geändert von Bleistift (01.04.2012 um 03:19 Uhr)


  3. #3
    Azubi(ne)
    Themenstarter

    Registriert seit
    13.03.2011
    Beiträge
    56
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: hover bereich auf background eingrenzen

    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;    
    }
    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.

  4. #4
    Samurai Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    21
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: hover bereich auf background eingrenzen

    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: ;
    HTML-Code:
    <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.
    Geändert von Bleistift (01.04.2012 um 15:18 Uhr)


  5. #5
    Azubi(ne)
    Themenstarter

    Registriert seit
    13.03.2011
    Beiträge
    56
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: hover bereich auf background eingrenzen

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

Ähnliche Themen

  1. css a a:hover usw
    Von Ozy im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 29.11.2010, 16:07
  2. hover
    Von gast im Forum Flash Forum
    Antworten: 1
    Letzter Beitrag: 24.10.2007, 09:30
  3. Hover
    Von Prinz im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 06.05.2007, 21:44
  4. Passwort geschützter Bereich (Interner Bereich)
    Von Marie89 im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 27.02.2006, 18:39
  5. Hover?
    Von im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 22.08.2004, 23:50

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •