Aha sorki nie zrozumialem Cie, faktycznie osiagnac taki efekt nie jest tak prosto. Zrobilem dwie wersje nie jest to w 100% to co chcesz osiagnac ale wydaje mi sie ze juz blizsze:
W tej wersji niebiski zmienia sie na zolty po najechaniu na czarny srodek ale zolty zmieni sie na niebieski dopiero po wyjsciu z obrebu bloku diva (zeby bylo szybciej dalem tu jednostki w %):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
* {
margin: 0;
padding: 0;
}
div#hover {
background: blue;
width: 200px;
height: 200px;
text-align: center;
position: relative;
margin: 20px;
}
a {
display: block;
width: 100px;
height: 100px;
background: black;
position: absolute;
top: 25%;
left: 25%;
}
span:hover {
display: block;
background: yellow;
width: 100%;
height: 100%;
}
W tej wersji pozycjonowalem puste spany - ale rowniez nie udalo mi sie osiagnac w 100% tego niebieskiego pola po opuszczeniu czarnego - jednak zrobilem mala sztuczke - dalem 2px "marginesu" miedzy czarnym srodkiem a zoltym tlem w ten sposob opuszczajac czarny srodek zniknie zolte tlo chyba ze zrobi sie to szybko to bywa ze niestety nie znika az do opusczenia diva...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
* {
margin: 0;
padding: 0;
}
div#hover {
background: blue;
width: 200px;
height: 200px;
text-align: center;
position: relative;
margin: 20px;
}
a {
display: block;
width: 100px;
height: 100px;
background: black;
position: absolute;
top: 25%;
left: 25%;
}
a span {
display: none;
}
a:hover span {
display: block;
position: absolute;
background: yellow;
}
a:hover span#top {
top: -50px;
left: -50px;
width: 200px;
height: 48px;
}
a:hover span#bottom {
bottom: -50px;
left: -50px;
width: 200px;
height: 48px;
}
a:hover span#left {
top: -4px;
left: -50px;
width: 48px;
height: 108px;
}
a:hover span#right{
top: -4px;
right: -50px;
width: 48px;
height: 108px;
}
No i trzeba dodac ze obydwa sposoby nie beda dzialac w IE ponizej 7.0 raz ze stary IE nie kuma hover dla innych znacznikow niz <a > a dwa ze ma problemy z pozycjonowaniem.