Bootstrap Freelancer模板：图片Hover交互失效及左键点击链接无法打开求助

Hey there! Let’s work through those two snags you’re hitting with your custom Bootstrap site built from the Freelancer template. I’ve dealt with similar quirks before, so let’s break them down one by one:

Issue 1: Hover Mask & YouTube Icon Not Triggering on Images #

First up, the hover state not showing your color mask and icon. Here are the most common fixes:

1. Verify Your HTML Structure #

Make sure your image, mask, and icon are nested correctly—this is usually the root cause. The mask and icon need to be children of a container that wraps the image, like this:

<div class="portfolio-item position-relative">
  <img src="your-project-image.jpg" class="img-fluid" alt="Project thumbnail">
  <!-- Hover mask -->
  <div class="portfolio-mask position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center">
    <i class="fab fa-youtube fs-1 text-white"></i>
  </div>
</div>

2. Fix the CSS Hover State #

Check that your CSS is targeting the hover correctly and setting the right properties. The mask should start hidden (opacity: 0) and fade in on hover. Also, ensure the parent container has position: relative so the mask stays tied to the image:

.portfolio-mask {
  background-color: rgba(255, 99, 71, 0.8); /* Your custom hover color */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 1;
}

.portfolio-item:hover .portfolio-mask {
  opacity: 1;
}

Don’t forget to confirm you’ve loaded Font Awesome (since you’re using the YouTube icon)—if the icon isn’t showing, double-check the CDN link in your <head>.

3. Check for JavaScript Conflicts #

If the template uses JS to trigger the hover, make sure the script is loaded correctly and isn’t throwing errors in your browser’s dev tools (F12 > Console tab). Sometimes a broken script can block hover effects.

Issue 2: Links Only Open on Right-Click, Left-Click Doesn’t Work #

This is almost always related to JavaScript intercepting the click event. Let’s fix it:

1. Inspect Link HTML & Href #

First, confirm your link has a valid href attribute (no typos, no javascript:void(0) unless you intend to handle it with JS):

<a href="https://your-target-url.com" class="project-link">View Project</a>

2. Look for PreventDefault() in JS #

Check your template’s JavaScript for code that’s blocking the default link behavior. You might see something like this:

document.querySelectorAll('.project-link').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault(); // This line stops left-click from navigating
    // Other code (like modal triggers) might be here
  });
});

If you don’t need the custom click behavior (like opening a modal), just remove the e.preventDefault() line. If you do need it (e.g., to show a modal first), add a manual redirect after your logic:

link.addEventListener('click', function(e) {
  e.preventDefault();
  // Your modal or custom logic here
  window.location.href = this.href; // Add this to trigger the redirect
});

3. Check Parent Element Click Events #

Sometimes a parent container has a click event that “steals” the link’s click. If that’s the case, add e.stopPropagation() to your link’s click handler to prevent the event from bubbling up:

link.addEventListener('click', function(e) {
  e.stopPropagation(); // Stops parent elements from intercepting the click
});

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