调整.project-content宽度时修复鼠标悬停异常透明问题

Hey there! Let's figure out why your hover effect is acting up after widening the .project-content container, and fix it for good.

First, the root cause: Your original code uses separate hover states for .video and .video-background. When you expand .project-content, this absolutely positioned div covers more of the video area. When your mouse lands on the text container, you’re technically hovering over .video-background (so its hover styles trigger) but not over .video (so it stays at opacity 0.2). This mismatch creates that weird semi-transparent look against the white hovered background.

The Fix: Unify All Hover Controls on the Parent #

Instead of splitting hover logic between multiple elements, handle every state change when the parent .video-background is hovered. This ensures consistent behavior no matter where the mouse lands inside the component—even on the widened text container.

Here’s the revised code:

HTML (no changes needed here)

<div class="works-content">
  <div class="video-background">
    <a href="#" target="_blank">
      <div class="video">
        <video loop="" muted="muted" poster="" playsinline="">
          <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        </video>
      </div>
    </a>
    <div class="project-content">
      <p class="project-title"><a href="#">TITLE</a></p>
      <p class="project-description"><a href="#">PROJECT DESCRIPTION</a></p>
    </div>
  </div>
</div>

Revised CSS

.works-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 60px 30px;
  padding: 0px 30px 100px 30px;
}

.video-background {
  background: $black;
  position: relative;
  transition: 0.5s ease;
  width: 100%;
}

.video-background:hover {
  transform: scale(1.04);
  transition: 0.5s ease;
  background: white;
}

/* Control video opacity via parent hover instead of .video:hover */
.video-background:hover .video {
  opacity: 1;
}

.video {
  transition: 0.5s ease;
  opacity: 0.2;
}

video {
  width: 100%;
}

.project-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  /* Adjust this width to whatever you need */
  width: 80%; /* Example widened width */
  /* Let hover events pass through to the parent */
  pointer-events: none;
}

.project-content a {
  color: white;
  /* Keep links clickable even with parent pointer-events disabled */
  pointer-events: auto;
}

.project-title a {
  font-size: 36px;
  letter-spacing: 2px;
  font-weight: bold;
  border-bottom: 10px solid $yellow;
}

.project-title a:hover {
  text-decoration: none;
}

.project-description {
  font-size: 36px;
  padding-top: 8px;
  letter-spacing: 1px;
}

/* Hide text via parent hover for consistency */
.video-background:hover .project-content {
  display: none;
}

JS (no changes needed, included for completeness)

jQuery('.video-background').mouseover(function(){
  $('video', this).get(0).play();
}).mouseout(function(){
  $('video', this).get(0).pause();
});

Key Changes Explained: #

1. Unified Hover State: All visual updates (video opacity, text visibility, background color, scale) trigger from .video-background:hover—no more conflicting hover events.
2. Pointer Events Tweak:
   • pointer-events: none on .project-content ensures hover events pass through to the parent, so the full hover state activates even when the mouse is over text.
   • pointer-events: auto on links keeps them clickable despite the parent’s pointer setting.
3. Cleaner Selectors: Replaced scattered text-hide rules with a single, easy-to-maintain rule tied to the parent hover.

Now you can adjust .project-content’s width to any value, and the hover effect will work smoothly across the entire component!

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