Child Hover not returning to unhovered state - css

Question

I am trying to construct a chunk of code that is an image and a text caption, which is a single anchor. the image is an image tag and the text is in a DIV tag.
When the anchor is hovered, the image+text box has a border appear, and the text div transitions between text to then show the background image (using opacity 1 to 0)
USING CSS ONLY
My issue is that I can't seem to find the best CSS to write this code, what I have is:
HTML:
<div class="outerCCBox">
<a href="*url*" >
<img src="images/logo/clarityTeeth.png" alt="">
<div class="clarityUnderBox">
<div class="clarityBox">
Clarity Makeup
</div>
</div>
</a>
</div>
The "clarityUnderBox is a presized box containing the background image that appears when the covering text fades out on hovering over the anchor tag.
CSS:
.clarityUnderBox {
width:256px !important;
height:86px !important;
background:url('../../images/logo/Clarity-C-320.png') no-repeat;
background-size:contain;
}
.clarityBox {
width:100% !important;
height:100% !important;
background-color: #000;
opacity:1;
color:#f0f0f0;
transition: color 0.4s linear,opacity 0.6s;
}
All CSS is simplified for this question (fonts, transition -types- etc removed).
The issue I am having appears to be with the next piece of code, the "hover" element:
.outerCCBox a:hover > .clarityUnderBox .clarityBox {
opacity:0;
color:transparent;
}
EDITED CSS:
originally
.outerCCBox a:hover .clarityUnderBox .clarityBox {
opacity:0;
color:transparent;
}
which behaves in the same way, as with the ">" selector.
The issue is that the hover works fine when hovering over the anchor element but when moving away, the .clarityBox class doesn't return to it's pre-hover state.
1) How do I make this return to it's pre hover state?
1b) Do I need to make a separate ~ a:not-on-hover CSS declaration?
2) How can I tidy up and make the "hover" CSS line more specific? - the way I've done it above works, but I'm sure there's a better syntax to it. I have tried things like using "*" and ">" selectors with limited success (combined with some rearrangement of class orders in the HTML)
Thanks for your guidance.
EDIT:
As requested, a fuller fiddle is here:
http://jsfiddle.net/gwrrezys/9/
But this fiddle doesn't show the image above the text, but it does replicate the general issue with the hover not updating / or not returning to its original state.
cheers
SOLUTION:
As suggested in comments by Martin, making the anchor a block element fixed this issue, I have retained the issue in the jsFiddle for reference and can be found by repeatedly hovering and then hovering off the anchor area.

Answer 1

Your actual problem is with the hovered parent (your anchor element) not having a width set.
If you make the anchor a block element it will fix the "leaking" content issue. by either
making the anchor display: block with set width and height
or making the parent fit the content by making it display: inline-block
DEMO
General to displaying children on hovered parents:
As soon as you extend a child of a :hover element over the whole screen (100% width and height) the parent will stay in the hovered state as long as you are hovering over the child.
To get around that you need to break the child out of its parents flow ... for example by making it's position: fixed (or position: absolute if the parent has no position: relative).
For example by using something like this on the child - and the z-index: -1; here makes sure it moves behind the parent:
position: fixed;
width: 100%;
height: 100%;
top:0;
left: 0;
z-index: -1;
DEMO
Or (depending on what area exactly you wan to cover with the child) you can alternatively extend the child only over a particular hover area (e.g. its parent) ... here you would then use position:absolute on the child and position: relative on the parent (to make sure you keep the child in the parents flow).
DEMO
A quick read on positioning elements: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/