将鼠标悬停在 div/image 上可使图像淡出并使文本淡入，但将鼠标悬停在文本上可消除图像的淡出。如何预防？

Question

使用 React 和 CSS。

我将我的应用程序设置为可以将鼠标悬停在图像上，图像会淡化为较暗的图像。然后文字淡入。但是，当我用光标触摸文本时，它会消除淡入淡出。有谁知道我该如何防止这种情况？

我的 JSX 文件：

import React, { useState } from 'react';

function ProjectSquare(props) {
    // const [isHover, setIsHover] = useState(false);

    //function hello() {
    //    console.log("Mouse entered.");
    //}

    return (
        <a href={props.project.linkString} target="_blank" rel="noopener noreferrer" style={{textDecoration: "none"}}>
                <div className="project-box">
                    <span className="project-text">foo</span>
                    <img src={props.project.imgString} alt={props.project.imgString} />
                </div>


        </a>
    );
}

export default ProjectSquare;

我的 CSS 文件：

.project-box {
    height: 500px;
    margin-bottom: 80px;
    border-radius: 25px;
    overflow: hidden;
    /*background-position-x: -80px;*/
    /*background-color: #a14ff9;*/
}

.project-box img:hover {
    -webkit-filter: brightness(20%);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.project-text {
    -webkit-filter: opacity(0);
    color: white;
    position: absolute;
    z-index: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}

.project-box:hover .project-text {
    -webkit-filter: opacity(1);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.project-box img {
    object-fit: cover;
    z-index: -1;
}

Answer 1

解决方案一： 使锚标记成为块元素，并将悬停添加到 .project-box 而不是 img.

a.project-box-anchor {
  /* anchor tag added inline-block */
  display: inline-block;
}

.project-box {
    height: 500px;
    margin-bottom: 80px;
    border-radius: 25px;
    overflow: hidden;
    /*background-position-x: -80px;*/
    /*background-color: #a14ff9;*/
}

/* instead of hovering on image, hover on the whole project box */
.project-box:hover img {
    -webkit-filter: brightness(20%);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.project-text {
    -webkit-filter: opacity(0);
    color: white;
    position: absolute;
    z-index: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}

.project-box:hover .project-text {
    -webkit-filter: opacity(1);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.project-box img {
    object-fit: cover;
    z-index: -1;
}

<a class="project-box-anchor" href="https://google.com" target="_blank" rel="noopener noreferrer">
  <div class="project-box">
    <span class="project-text">foo</span>
    <img style="height:100px;" src="http://placekitten.com/g/200/200" alt="alt_text" />
  </div>
</a>

解决方案 2： 更“hacky”

.project-text {
  pointer-events: none;
}

将鼠标悬停在 div/image 上可使图像淡出并使文本淡入，但将鼠标悬停在文本上可消除图像的淡出。如何预防？

Hover over div/image to fade out image and have text fade in, but hovering over text removes fade out of image. How to prevent?

html

javascript

css

webkit

reactjs