Question

我在这里有一个项目，当我点击某个链接时，我希望在图片顶部显示叠加层，以便我们可以阅读有关产品的一些信息。我正在寻找的效果是这样的：

为了做到这一点，我有一个带有信息的div和div中带有图片的白色背景，如下所示：

      <div id="leftWindow">
        <a href="notalink.html" id="infoButton">+ Information</a>
        <div id="info" class="notVisible">
          Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product
        </div>
      </div>

带有信息的div有一个＆＃34; notVisible＆＃34;我有另一个不透明度为.7的类，如下所示：

#info {
    background-color: white;
    transition: opacity 1.5s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    width: 342px;
    height: 516px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
}

.visibleIsh {
    opacity: .7;
}

当您点击链接时，一些javascript交换了类：

$( document ).on('click', '#infoButton', function(e){
  e.preventDefault();
  $("#info").removeClass("notVisible").addClass("visibleIsh");

});

这样可行，但问题是文本也失去了我不想要的不透明度。要解决这个问题，我使用rgba代替不透明度，如下所示：

的CSS：

.visibleIsh {
    background-color: rgba(255,255,255,.7);
}

#info {
    background-color: rgba(255,255,255,1);
    transition: background-color 1.5s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    width: 342px;
    height: 516px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
}

我得到你可以在gif中看到的越野行为。任何帮助赞赏。感谢

Answer 1

目前您所做的只是淡化背景色。使用该方法，文本始终可见。如果你想让它看起来像你的第一个gif，你应该将背景不透明度设置为.7开始并隐藏整个#info元素。然后你可以使用jQuery在点击时淡化整个元素。

＆＃13;

$( document ).on('click', '#infoButton', function(e){
  e.preventDefault();
  $("#info").fadeIn(1500);

});

＆＃13;

#info {
    display:none;
    background-color: rgba(255,255,255,.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 342px;
    height: 516px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="leftWindow">
	<a href="notalink.html" id="infoButton">+ Information</a>
	<div id="info">Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product
	</div>
</div>

＆＃13;

好吧，让我们假设@eithed在他们的假设中是正确的，你想用CSS类而不是jQuery来做这件事。您也可以像这样完成它（z-index属性很重要，因为opacity不会隐藏DOM中的元素，所以没有它，您将无法点击+ Information链接因为#info元素将涵盖它）：

＆＃13;

$( document ).on('click', '#infoButton', function(e){
  e.preventDefault();
  $("#info").addClass('visible');
});

＆＃13;

#info {
    opacity:0;
    background-color: rgba(255,255,255,.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 342px;
    height: 516px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    transition:all 1.5s;
    z-index:-1;
}
  #info.visible {
    opacity:1;
    z-index:10;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="leftWindow">
	<a href="notalink.html" id="infoButton">+ Information</a>
	<div id="info">Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product
	</div>
</div>

＆＃13;

过渡与rgba无法正常工作

1 个答案: