This is my first time posting on stackoverflow, so please excuse me if I overlook something obvious. I tried searching for a solution beforehand but couldn't find one that seemed relevant.
In the following jsfiddle example, I have a div that acts as a hover target to trigger some transitions on an <a> element.
http://jsfiddle.net/ramatsu/Q9rfg/
Here's the HTML markup:
<div class="target">Target
<a href="#" class="LightMe"><p>.LightMe</p></a>
</div>
And here is the corresponding CSS:
body {
background-color: #099;
height: 100%;
width: 100%;
margin-top:200px;
}
.target{
position: absolute;
left: 40%;
height: 100px;
width: 200px;
padding: 20px;
background-color: #ccc;
cursor: pointer;
}
a {
display: block;
position: relative;
padding: 1px;
border-radius: 15%;
}
a.LightMe {
/*Starting state */
background-color: white;
border-style:solid;
border-color:#fff;
top: -120px;
left: -200px;
height: 80px;
width: 80px;
z-index: 10;
opacity: 0;
transition:left 0.55s ease, opacity .5s .7s ease;
-webkit-transition:left 0.55s ease, opacity .5s .7s ease;
-o-transition:left 0.55s ease, opacity .5s .7s ease;
}
.target:hover a.LightMe {
/*Ending state*/
left: 80px;
opacity: 1;
transition:left 0.55s .7s ease, opacity .5s ease;
-webkit-transition:left 0.55s .7s ease, opacity .5s ease;
-o-transition:left 0.55s .7s ease, opacity .5s ease;
}
.target:hover {
transition: background-color 500ms ease;
-webkit-background-color 500ms ease;
-o-background-color 500ms ease;
background-color:#999;
}
- Hover over the grey box labeled Target and back off again to see the transitions on the
<a>element. It's doing what I want: opacity fades in during position delay, then it slides to the desired position. when moving out of the hover target, the<a>slides to it's original position, then opacity fades back out. All good so far. - The issue arises when the user hovers over the hidden
<a>element, triggering the same set of transitions, leading to unintended consequences.
I wish to prevent any response when hovering directly over the <a> element, ideally using only CSS.
I attempted adding explicit hover states to <a> and .LightMe to override this behavior, but with no success. (It could be due to incorrect selector syntax.)
I intentionally added the background-color transition to .target for testing purposes, which revealed that hovering over the <a> triggers the transitions of the parent .target div. This is where I hit a roadblock and decided to seek assistance.
I am delving into concepts beyond my current understanding, starting from what I know and working towards my goal. Here is the initial jsfiddle that served as my reference point (with credit to the original author):