div:hover flackert bei "hovern"

Unregistriert

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

<!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>

Alles anzeigen

Unregistriert

Keiner ne Lösung? :-\

Bandit

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

Bandit

HTML

<!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>

Alles anzeigen

djheke

Hie nochmal ohne negative Positionierung.

HTML

<!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>

Alles anzeigen

Viel Spaß

Unregistriert

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

Tags