When hovering over the 4 “solutions” under the main image - if not exactly over the text the transition doesn’t change the text to #fff but it does change the background color losing the text.
Hover over the “Website Design & Maintenance” box.
Any help again would be appreciated.
Thanks.
Ryan.
But you have divs inside those as, which is not good. And there are a few more problems in your code, which you would need to address.
The problem is that a doesn’t take up all the width and height its parent li has. It takes only the top half of li, and the div that’s contained in it takes the middle of li. Together they account for most li “surface”, except the bottom-right corner, where the problem appears.
Since you have to different hover events: one for li and one for a, you get two different results, visible when you hover over li (bottom-rigth corner) by not changing the a color also, as it does on hovering over a (top half) or the div inside a (middle).
As a side note, I would move the padding to li (the red code), or find another way to center my text.
You wouldn’t need to change anything else with my method as the changes are effected from the outer element. You don’t need to be on the text for it to change.
I answered a similar question about a dropdown menu and people forget that you can make changes to inner elements without needing to hover right over them.
The page is using an html5 doctype so anchors are allowed to wrap divs (even if I do hate it and it causes bugs) - which is why I didn’t mention it but perhaps I should have said something
You forget to mention the disjointed hover.
I see no problem with the hover as the background color change was on the parent which was fine and the text colour change was only needed on the child so we can do that without changing anything.
It may have been neater of course to have it all done on one element but I was must making the point that we can change inner elements even when they are not hovered by using the hover on the parent. It’s a useful trick - that’s all I meant
Thanks a lot - Paul your small amount of code has fixed my issue.
Noonope - I do see what you are seeing and a lot of this code is not how I would like it to look, as I hate dealing with templates especially when they want to make as many changes to it as they have.
I am hoping to do some cleanup on the code after the site goes live as the client is really pushing to get this up.
@Paul
No, I meant that aside from dropdown menu, disjointed hover is another scenario where “you can make changes to inner elements without needing to hover right over them”.
The html DTD is 5, but the mark up it’s an ostrichamel (RO: “struţo-cămilă” to EN: “ostrich-camel”). Like the OP didn’t had the time to convert its HTML 4 to HTML5 completely.