Research on the problem of tilting mouse rollover navigation

In this article, we create an oblique Mouse FlipNavigation as an example to analyze, I hope to help some of the mouse over the navigation of the production of a friend still doubt.

The day before yesterday a friend sent me a page let me help her to see why the mouse rollover can not achieve. I opened the source file and looked at it, and found that the author did not grasp the characteristics of a mouse flip. And it's not enough to think about tilt navigation. Although I had seen these problems at the time, I didn't have time to explain them because I had a project in hand. Just yesterday work was busy, and now picked up the document looked, found that through this event can explain a lot of knowledge points, there are some places relatively easy to be less attention, but it is very critical.

Let's take a look at what we want to achieve, but before we do that it can only exist in our brains or sketches. We first have to think about what it looks like, and then we can analyze how we want to practice the effect is how to do, gossip less, first look at the picture:

　　

We see the above picture, it can feel like nothing, seems very easy to do. Well, let's look at this effect in detail. We can't just insert a picture in HTML with the standard. Using the standard to do is to use the image as a background of the way to invoke the CSS. So let's take a look at whether this kind of navigation can be directly called directly, which is there any problem? Next, take a look at the larger picture of the navigation effect:

　　

　　

We note that the "danger zone" in the above picture is obvious, if we put two inclined blocks together there must be a repeat area, our current CSS does not support the special-shaped processing. To solve this problem, you need to make the two squares overlap. Overlap requires that they be placed at different levels. This will be used in the CSS positioning: "position:static absolute fixed relative."

Do the mouse flip we usually make a picture of all the backgrounds, and then use CSS to set the different positions of the pictures under different labels. One might think that the background map of the navigation should be this:

　　

If that's what you think, then the problem comes out: When you flip a mouse over any chunk in five blocks, the repeat position on the top of the hazard area will block the left and the right side of the navigation. So the normal way is:

　　

　　

This can only be used as a final background image in the absence of a danger zone. Of course also note that the background is not white but transparent, mainly not to the background with the site integration, the key is not to block the adjacent background in the danger zone. I'm using a GIF, and the GIF has a bit of edge on the edges when it's transparent. If you want to deal with different colors of the site background, it is best to use PNG or the edge of the GIF to make dot pixels.

After thinking about this background map, we need to think about how to make this navigation. First to analyze this mouse rollover, the original mouse rollover is JS, now can be through the CSS: hover can also achieve this flip effect, less code, clear structure. So the flip of these five navigation is to be implemented by A:hover.