[CSS] hover effect op uiteinden in geneste elementen

[NeFoRcE]

Heren,

Het lijkt zo simpel, maar ik staar me er blind op.

Huidige situatie
Ik heb een structuur als:

code:

<div class="row">
    <div class="col-xs-1">
        <p>editable cell</p>
    </div>
    <div class="col-xs-1">
        <p>editable cell</p>
    </div>
</div>

Wens
bij een hover over ".row" (waarbij je dus niet gaat over de children), wil ik dat er een lijntje komt om ".row"
Wanneer je dan met je muis verder gaat binnen die ".row" en terechtkomt boven ".col-xs-1", wil ik dat dáár een lijntje om heen komt.
Wanneer je nóg verder muist richting de "<p>" wil ik dat alleen dáár een lijntje om heen komt.

Kortom; omlijn het element waar je op dat moment boven 'hover' zonder dat er een lijntje komt om de bovenliggende elementen.

voetnoot
De diepte en het type element varieert.

Is dit oplosbaar met alleen CSS? Of zal ik toch nog JS moeten gebruiken??

JS Fiddle
http://jsfiddle.net/crPMv/

[alex3305]

Maak anders eens een usecase op bijvoorbeeld jsfiddle. Dan kunnen we misschien ook concreet zien hoe ver dat je al gekomen bent .

[RobIII]

Begrijp ik goed dat je dit wil, waarbij je altijd maar 1 outline (die van het hovered element op dat moment) wil zien? Dat kan niet met CSS alleen, daar ga je een beetje JS voor nodig hebben.

[NeFoRcE]

*update*

http://jsfiddle.net/crPMv/

*edit:

@ Roblll

Inderdaad, dat is wat ik wil... hmmm.. wel JS dus? Balen. Had gehoopt dat er een css selector/pseudo was voor het selecteren van 'leafs'....

[ Voor 68% gewijzigd door NeFoRcE op 05-09-2013 14:16 ]