Ergebnis 1 bis 6 von 6

Thema: div:hover flackert bei "hovern"

  1. #1
    Unregistriert
    Gast

    Frage div:hover flackert bei "hovern"

    Hallo zusammen,

    ich versuche gerade meine Intro seite zu gestalten nur mit CSS und ohne Bilder.

    Jetzt habe ich ein kleines problem.
    Und zwar wenn ich in einem DIV einen kleineren DIV hovern möchte,
    also so das aus dem großen Kasten beim Hover ein kleiner wird,
    flackert mir der Große die ganze zeit.
    Ich möchte das man dann nur den kleinen sieht und der große verschwindet.
    Hoffe habe es gut erklärt

    Vielen dank schonmal für eure Hilfe!

    Hier der HTML Code mit CSS:

    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Unbenanntes Dokument</title>
    <style type="text/css">
    body {
    	background-color: #3a3a3a;
    }
    #div_start {
    	position:absolute;
    	left:0px;
    	top:0px;
    	margin-left: -350px;
    	margin-top: -100px;
    	top: 50%;
    	left: 50%;
    	width:700px;
    	height:200px;
    }
    #red {
    	position:absolute;
    	left:20px;
    	top:25px;
    	width:150px;
    	height:150px;
    	background-color: #d3342a;
    	-webkit-border-radius: 10px;
            -khtml-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
    }
    #red:hover {
    	left:67.5px;
    	top:70px;
    	width:60px;
    	height:60px;
    	background-color: #d3342a;
    }
    #yellow {
    	position:absolute;
    	left:190px;
    	top:25px;
    	width:150px;
    	height:150px;
    	background-color: #cee530;
    }
    #green {
    	position:absolute;
    	left:360px;
    	top:25px;
    	width:150px;
    	height:150px;
    	background-color: #2ad36a;
    }
    #blue {
    	position:absolute;
    	left:530px;
    	top:25px;
    	width:150px;
    	height:150px;
    	background-color: #2a76d3;
    }
    </style>
    </head>
    
    <body>
    <div id="div_start">
        <div id="red"></div>
        <div id="yellow"></div>
        <div id="green"></div>
        <div id="blue"></div>
    </div>
    </body>
    </html>
    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
    Unregistriert
    Gast

    Standard AW: div:hover flackert bei "hovern"

    Keiner ne Lösung? :-\

  3. #3
    Bandit
    Gast

    Standard AW: div:hover flackert bei "hovern"

    Du weißt schon, dass Weihnachten ist und viele Helfer mal nicht am Rechner sitzen?

  4. #4
    Bandit
    Gast

    Standard AW: div:hover flackert bei "hovern"

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Unbenanntes Dokument</title>
    <style type="text/css">
    body {
        background-color: #3a3a3a;
    }
    #div_start {
        position:absolute;
        left:0px;
        top:0px;
        margin-left: -350px;
        margin-top: -100px;
        top: 50%;
        left: 50%;
        width:700px;
        height:200px;
    }
    #red {
        position:absolute;
        left:20px;
        top:25px;
        width:150px;
        height:150px;
        background-color: #d3342a;
        -webkit-border-radius: 10px;
        -khtml-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        z-index: 10;
    }
    #red:hover {
        background: transparent;
    }
    #red_small {
        position:absolute;
        left:67px;
        top:70px;
        width:60px;
        height:60px;
        background-color: #d3342a;
        -webkit-border-radius: 10px;
        -khtml-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        z-index: 1;
    }
    #yellow {
        position:absolute;
        left:190px;
        top:25px;
        width:150px;
        height:150px;
        background-color: #cee530;
    }
    #green {
        position:absolute;
        left:360px;
        top:25px;
        width:150px;
        height:150px;
        background-color: #2ad36a;
    }
    #blue {
        position:absolute;
        left:530px;
        top:25px;
        width:150px;
        height:150px;
        background-color: #2a76d3;
    }
    </style>
    </head>
    
    <body>
    <div id="div_start">
        <div id="red"></div>
        <div id="red_small"></div>
        <div id="yellow"></div>
        <div id="green"></div>
        <div id="blue"></div>
    </div>
    </body>
    </html>

  5. #5
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    461
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: div:hover flackert bei "hovern"

    Hie nochmal ohne negative Positionierung.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hover</title>
    <style type="text/css">
    
    
    body {
        background-color: #3a3a3a;
    }
    #div_start , #red:hover span {
        position:absolute;
        left:0px;
        top:0px;
            right:0;
            bottom:0;
        margin:auto;
    }
    
    #div_start {
        width:700px;
        height:150px;
    }
    
    #red , #red span , #yellow , #green , #blue {
            margin-right:25px;
        width:150px;
        height:150px;
            float:left;
            position:relative;
            display:block;
    }
    #red span { 
           background:#d3342a;
    }
    
    #yellow { 
           background:yellow;
    }
    
    #green { 
           background:green;
    }
    
    #blue { 
           background:blue;
    }
    
    #red:hover span {
        width:60px;
        height:60px;
    }
    
    </style>
    </head>
    
    <body>
    <div id="div_start">
        <div id="red"><span></span></div>
        <div id="yellow"></div>
        <div id="green"></div>
        <div id="blue"></div>
    </div>
    </body>
    </html>
    Viel Spaß

  6. #6
    Unregistriert
    Gast

    Standard AW: div:hover flackert bei "hovern"

    Funktioniert, vielen dank

    Also soweit ich das sehe, Lag es an der z-Index Positionierung und an dem background:transparenz?
    Eigentlich einfach^^

    Danke euch und frohe Feiertage noch

Ähnliche Themen

  1. Antworten: 7
    Letzter Beitrag: 03.07.2009, 23:20
  2. Bei class="active" kein Hover-Effekt: wie?
    Von Mütze im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 26.08.2008, 09:37
  3. Hover-Effekt bei "active"-Schaltfläche deaktiviere
    Von Mütze im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 31.03.2008, 12:49
  4. "visited-Grafik" (und Hover)
    Von Kilian im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 16.05.2005, 15:59
  5. "css" Verschiedene :hover über das class="&am
    Von vandyce im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 18.04.2004, 15:57

Stichworte

Berechtigungen

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