As you can see, the “tails” of my 2nd, 3rd, and 4th arrows are not showing up on the hover event. My CSS is in the head of the document. What am I doing wrong? Please help if you can…:sick:
On link hover, just as you are doing on the angled right side also do on the angled left side, i.e. increase the width further and soak it up with negative left margin. Adjust background position accordingly.
Thanks for the reply. I tried what you suggested, but it doesn’t seem to work. I get the exact same effect of the tails not showing on hover. I increased the width of the 2nd button on hover and give it a negative left margin like this:
#connect a:hover {
width: 216px; // 20px larger than before
margin-right: -20px // Same as before
margin-left: -20px // New
}
I then increased the width of the span on hover and adjusted the positioning of the background image:
#connect a:hover span {
background-position: -156px // 20px less than before -124px;
width: 216px; // 20px larger than before
}
I can see a shadow behind the “connect” button on the bottom, so I tried adding a high z-index but that didn’t do anything.
I would simplify it a bit and absolutely place the anchors so that you can change the width on hover without affecting anything else.
As you are using a transparent png you have to be careful with the shadow compounding so I would shorten the height of the anchors so the bottom shadow isn’t changed on hover.
Thank you so much Paul O’B - your method works perfectly! I discovered (late) last night that the assigned staggered z-indexes given to the <li> elements were causing the tails not to appear. I see how you assign a high z-index to the <a> elements on hover. Very nice. The solution of shortening the height of the <li> and <span> elements was genius and gets rid of the compounding shadow perfectly. (I only began noticing that late last night).
I will study your code more and use it a a guideline for future use in these kinds of situations. I was tearing my hair out and completely stumped. Surely this is an advanced use of CSS. It frequently amazes me how complicated things get for such a seemingly simply effect!
Thank you again for graciously taming this beast. I hope this thread will help others along the way.
I am beginning to rediscover CSS as a form of coding every bit as complex and powerful as PHP or Javascript, albeit in a completely different way. Just because its “front end” doesn’t mean its not a highly sophisticated, complex and worthy skill in its own right.