Research on the problem of flip navigation with tilted mouse

In this article, we will analyze the production of a tilted mouse flip navigation as an example, hoping to help some friends who still have questions about the production of mouse flip navigation.
The day before yesterday, a friend online sent me a page and asked me to help her figure out why the mouse rollover could not be achieved. I opened the source file and took a look, and found that the author did not even have a mouse rollover feature. And not enough thought was given to tilt navigation. Although I noticed these problems at the time, I didn't have time to explain them to her because I was finishing a project. Just finished my work yesterday, and now I picked up the file to take a look. I found that many knowledge points can be explained through this incident. Some places are easy to be ignored, but they are indeed very critical.

Let's first take a look at the effects we want to achieve. Of course, before we do it, these can only exist in our minds or sketches. We must first think about what it looks like, and then we can analyze how to achieve the desired effect. Without further ado, let's look at the picture first:

When we look at the picture above, we may feel that it is nothing and seems easy to do. Well, let's analyze this effect in detail. If we use the standard implementation, we cannot directly insert an image into HTML. To do it in a standard way, you need to use CSS to call the image as the background. So let's see if such navigation can be called directly. Are there any problems? Please take a look at the enlarged picture of this navigation effect:

Please note that the "danger zone" in the above picture is very obvious. If we put two tilted positive blocks together, there will inevitably be a repeated area. Our current CSS does not support special-shaped processing. To solve this problem, the two blocks must overlap. Overlapping requires placing them on different levels. This requires the use of positioning in CSS: "position: static | absolute | fixed | relative".
To do mouse rollover, we usually make all the backgrounds into one picture, and then use CSS to set the different positions of the pictures under different tags. Maybe someone would think that the background image of this navigation should be like this:

If you really think so, then the problem arises: when the mouse is rolled over in any of the five blocks, the repeated parts of the danger zone above will block a corner of the left and right navigation. So the normal way is:

Only in this way can it be used as the final background image without the danger zone. Of course, it should also be noted that the background is not white but transparent. The main purpose is not to blend with the background of the website. The key is not to block the adjacent background in the danger zone. I use GIF images, and when GIF images are transparent, there will be some rough edges. If you want to deal with different color website backgrounds, it is best to use PNG or make the edges of the GIF image into pixels.
After thinking about this background image, we need to think about how to make this navigation. Let’s analyze the mouse rollover first. Originally, mouse rollover was done by JS, but now we can use CSS’s :hover to achieve this effect, with less code and clear structure. So the flipping of these five navigations is achieved by A:hover.

<<: Selection and thinking of MySQL data backup method

>>: How to use the Marquee tag in XHTML code