Na tomto příkladu je ukázáno, jak se chová přísná Opera, když nemá definovaný počáteční stav rodiče nebo :hover u rodiče. Pokud bychom tedy chtěli, aby při najetí myši nad box s id="parent" tento box zůstal modrý a celý efekt pracoval, jak je zamýšleno, musíme nadefinovat počáteční stav #parent a #parent:hover s modrým pozadím.
Mozilla je v tomto případě shovívavější a vše provádí podle "představ".
Zde je vše ukázáno přesně podle přísných pravidel Opery. Takto tedy vypadá zápis, který funguje i v Opeře i v Mozille.
#rodic {background-color: Green; }
#rodic:hover {background-color: Lime; }
#rodic #dite {background-color: Black; }
#rodic:hover #dite {background-color: White; }
Příklad samozřejmě nefunguje v Internet Exploreru, který umí pracovat s dynamickým stavem :hover jen u prvku a
Zde je ukázáno chování vnořeného prvku v odkazu
Vše pracuje tak jak má ve všech prohlížečích (IE, Mozilla, Opera). Ovšem pokud bychom z následujícího kódu vynechali definici prvku a nebo a:hover v Opeře přestane vše fungovat.
a {color: Blue;}
a:hover {color: Red;}
a span {color: Yellow; background-color: Black;}
a:hover span {color: White; background-color: Blue;}
Specifickou ukázkou je tato tabulka. Výše uvedená pravidla pro přesné definování stylu nadřazených prvků platí pro Operu také.
| prvni buňka | druha buňka | treti buňka |
| prvni buňka | druha buňka | treti buňka |
| prvni buňka | druha buňka | treti buňka |
tr {background-color: transparent;}
td {background-color: transparent;}
tr:hover {background-color: Green;}
tr:hover td {background-color: Black;}
Podle mého se v tomto případě Opera nechová správně, protože řádek tabulky obsahuje tři buňky (nikoli jednu, se kterou pracuje Opera), a proto by všechny tři měly být černé.
Zde je trochu rozšířený příklad č.2. Opera zcela správně při vyvolání dynamického stavu :hover u podřazeného prvku aplikuje i předpis pro dynamický stav :hover u nadřazeného prvku. Bohužel se už neaplikuje stav #nadřazený:hover #druhýpodřazený.
V této ukázce by tak nápis #group p měl být červený nejen po najetí nad modrý rodičovský element, ale i po najetí nad podřazený žlutý element.
#group p
#group {
width: 100px; height: 100px;
background-color: Blue;
}
#group #one {
width: 50px;height: 50px;
background-color:Yellow;
}
#group p {
background-color: transparent;
color: green;
}
#group:hover {
background-color: White;
}
#group #one:hover {
background-color: Green;
}
#group:hover p {
background-color: transparent;
color: Red;
}