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>

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

2 个答案: