TurnJS添加背景色遇异常：页面悬停歪斜、文本重叠问题求助

Hey there, let's work through these TurnJS problems you're hitting! I've dealt with similar quirks before, so here's how to get things back on track:

1. Fixing Transparent Background & Text Overlap #

The default transparent pages are definitely a problem for readability. Instead of adding a background to the main flipbook container (which can mess with the flip mechanics), target the individual .page elements directly with CSS. This ensures each page has its own solid background without breaking the flip effect:

/* Add this to your stylesheet */
.page {
  background-color: #ffffff; /* Use any color you need */
  overflow: hidden; /* Prevents content from spilling outside the page */
  margin: 0; /* Reset default margins that might cause sizing issues */
  padding: 1rem; /* Optional: Add padding for your content */
}

Make sure each .page element in your HTML has this class applied—this is the standard structure TurnJS expects for individual pages.

2. Fixing Mouse Hover Skew/Glitches #

When adding a background causes skew or weird hover behavior, it almost always comes down to mismatched element sizing. TurnJS relies on precise width/height calculations for the flip animation. Here's how to fix it:

Step 1: Match Page Sizes to TurnJS Initialization #

When you initialize TurnJS, you set a total width and height for the flipbook. Each individual page should be exactly half the total width (since two pages are side-by-side) and equal to the total height. For example, if your initialization looks like this:

$("#flipbook").turn({
  width: 800,
  height: 600,
  autoCenter: true
});

Update your .page CSS to match:

.page {
  /* Keep the background and other styles from earlier */
  width: 400px; /* 800px total / 2 pages */
  height: 600px; /* Exact match to the flipbook height */
}

Step 2: Avoid Unintended Layout Shifts #

Check for any extra padding, borders, or margins on the .page elements that could add to their total size (use your browser's DevTools to inspect elements if needed). If you need borders, use box-sizing: border-box to ensure they don't expand the page beyond your set dimensions:

.page {
  box-sizing: border-box; /* Includes padding/borders in width/height */
  border: 1px solid #ccc; /* Example border without breaking sizing */
}

Step 3: Verify Container Styles #

Don't add backgrounds or padding to the main #flipbook container itself—this can interfere with TurnJS's internal positioning. Keep it clean:

#flipbook {
  /* Only set width/height if not handled by the TurnJS init */
  /* No background, padding, or margins here */
}

3. Working Around HTTP Script Limitations #

Since you can't use JSFiddle with the non-HTTPS TurnJS script, try downloading the TurnJS library files directly from their official site and hosting them locally in your project. This lets you test everything without HTTPS restrictions, and you won't rely on external HTTP links anymore.

Give these steps a shot—they should resolve both the text overlap and hover skew issues. If you run into specific edge cases, feel free to share snippets of your HTML/CSS/JS (stripped of sensitive info) and I can help tweak things further!

内容的提问来源于stack exchange，提问作者pandik70