如何在图像悬停而不是文本悬停上显示文本 - CSS/SASS

Question

我确信这是一个简单的修复，但无法理解我做错了什么。我试图显示“标题文本”并减少图像悬停时图像的不透明度。我降低了图像不透明度，但除非直接悬停文本，否则似乎无法显示文本。任何帮助，将不胜感激！谢谢#work {  .items {    display: grid;    grid-template-columns: repeat(2, 1fr);    grid-gap: 1rem;    .item {      position: relative;      background: $dark-color;      // overflow: hidden;      &:after {        content: '';        position: absolute;        display: block;        background: inherit;        opacity: 0;        top: 0;        left: 0;        width: 100%;        height: 100%;      }      // bring in main color overlay      &:hover:after {        opacity: 0.3;      }      &-text {        position: absolute;        top: 50%;        left: 0;        bottom: 0;        right: 0;        opacity: 0;        text-align: center;        z-index: 1;        color: #fff;      }      // bring in text on hover      &-image:hover &-text {        opacity: 1;      }      &-image:before {        content: '';        display: block;        padding-top: 75%;        overflow: hidden;      }      &-image img {        position: absolute;        top: 0;        left: 0;        width: 100%;        height: auto;        line-height: 0;      }    }  }

Answer 1

我认为你可以将图像和文本包装在 div 中：

<div class="wrapper">

    <img src="image.jpg">

    <p>Your Title</p>

</div>

<style>

    .wrapper {

        position: relative;

        overflow: hidden;

    }

    .wrapper img {

        display: block;

        max-width: 100%;

        line-height: 0;

    }

    .wrapper p {

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        opacity: 0;

        z-index: 2;

    }

    .wrapper:hover img {

        opacity: 0.6;

    }

    .wrapper:hover p {

        opacity: 1;

    }

</style>

Answer 2

如果我理解正确的话，你想要做的事情不能仅用 HTML/CSS 来完成。您必须使用 JavaScript 才能达到这样的效果。

下面是一个使用 jQuery 的示例，它在悬停时将 .darken 类添加到 .item 中。如果不重写代码，这在您的情况下将不起作用，但您明白了。您当然可以在这两个函数中添加任何内容：

<script>

    (function(){

        jQuery(".item").hover(

            function() {

                jQuery(this).addClass('darken');

            }, function() {

                jQuery(this).removeClass('darken');

            }

        );

    })();

</script>