Question

我有一个read-more div，黄色背景中有一个字体很棒的图标。仅在屏幕尺寸小于767px时显示。当此div显示时，用户可以单击它以查看.overlay。如果屏幕尺寸大于768px，则read-more不应显示，当用户将鼠标悬停在图像上时，覆盖显示（此处当前有效）。我无法解决的问题：

如何完全隐藏屏幕的read-more div＆gt; 768px？
如何点击read-more div并点击 .overlay显示？

＆＃13;

$(function() {
  var overlay = $('.overlay');
  $("#product-detailscar").one('click', function(e) {
    overlay.appendTo(document.body)
  });
});

＆＃13;

@media screen and (max-width: 767px) {
  .read-more i {
    padding: 5px 10px;
    display: inline-block;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-box-shadow: 0px 0px 2px #888;
    -webkit-box-shadow: 0px 0px 2px #888;
    box-shadow: 0px 0px 2px #888;
    background-color: yellow;
    color: red;
    position: absolute;
    left: 50%;
    top: 50%;
  }
}
@media screen and (min-width: 768px) {
  .product-detailscar:hover .overlay {
    opacity: 1;
  }
}
.product-detailscar .overlay {
  /*.well.carousel .overlay {*/
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 0;
  background: #F7F7F7;
  color: #FFF;
  padding: 10px;
  text-align: left;
  border-top: 1px solid #A10000;
  border-bottom: 1px solid #A10000;
  /*vertical-align: middle;*/
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
  /*padding: 25px;
    text-align: center;*/
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="read-more"><i class="fa fa-file-text-o" aria-hidden="true"></i>
</div>

＆＃13;

Answer 1

隐藏.read-more：

@media screen and (min-width: 768px) {
     #read-more {
         display:none;
     }
}

要使.overlay可点击：

$("#read-more").click(function() {
    $(".overlay").show();
});

点击隐藏.overlay：

$(".overlay").click(function() {
    $(".overlay").hide();
});

如何隐藏div并使其可单击以显示媒体屏幕的叠加层

1 个答案: