我有一个 read-more
div,在黄色背景中有一个超棒的字体图标。这仅在屏幕尺寸小于 767px 时显示。当此 div 显示时,用户可以单击它来查看 .overlay
。
如果屏幕尺寸大于 768 像素,则 read-more
不应显示,当用户将鼠标悬停在图像上时,会显示叠加层(目前有效)。
我无法解决的问题:
- 如何为大于 768 像素的屏幕完全隐藏
read-more
div? - 如何使
read-more
div 可点击以及点击时.overlay
显示?
$(function() {
var overlay = $('.overlay');
$("#product-detailscar").one('click', function(e) {
overlay.appendTo(document.body)
});
});
@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;*/
}
<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>
最佳答案
隐藏.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();
});
关于javascript - 如何隐藏 div 并使其可点击以显示媒体屏幕的叠加层,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39452591/