javascript - 单击图标以显示覆盖

Question

我在中心有一个黄色的fa-icon。仅适用于小于767像素的屏幕。在其上方，悬停时会显示叠加层。现在，对于<767px的显示屏，我希望在图标上具有悬停效果。但这不起作用（可能是因为上面有.overlay）=问题1。
此外，我尝试单击覆盖层显示的图标时。现在这根本不起作用（=问题2）。如何解决这些？

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

.product-detailsmas .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: 0;
    background: #F7F7F7;
    color: blue;
    text-align: center;
    border-top: 1px solid #A10000;
    /* vertical-align: middle; */
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
}

.product-detailsmas {
    background-color: #E6E6E6;
    text-align: center;
  position: relative;
}

@media screen and (min-width: 768px) {
.product-detailsmas:hover .overlay {
    opacity: 1;
}
  }

.well.sb .product-titlesidebar {
    font-size: 13px;
    font-family: 'Montserrat',sans-serif;
    color: #444;
    font-weight: 700;
    line-height: 1.25em;
    margin: 5px;
}

@media screen and (max-width: 767px) {
  .read-more i {
        padding: 5px 10px;
        display: inline-block;
        -moz-border-radius: 140px;
        -webkit-border-radius: 140px;
        border-radius: 100px;
        -moz-box-shadow: 0 0 2px #888;
        -webkit-box-shadow: 0 0 2px #888;
        box-shadow: 0 0 2px #888;
        background-color: yellow;
		opacity:0.7;
        color: #888;
        position: absolute;
        left: 50%;
    	top: 50%;
    	transform: translate(-50%,-50%);
    }
	
	.read-more i:hover {
		color:#FFF;
		background-color:#000;
	}
  }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<div>
        <a href="#" target="_blank">
        <div class="product-detailsmas">
            <div class="image-video-linksidebar">
                <img alt="#" src="http://lorempixel.com/100/100">
                <div class="brandmas">
                    BRAND
                </div>
                <div class="categorymas">
                    CATEGORY
                </div>
              <div class="read-more"><i class="fa fa-file-text-o fa-2x" aria-hidden="true"></i>
				</div>
            </div>
            <div class="overlay">
                <div class="intro-descriptioncar">
                    Intro description car
                </div>
                <div class="userfield1car">
                    Userfield-1-car
                </div>
                <div class="userfield1car">
                    Userfield-2-car
                </div>
                <div class="userfield1car">
                    Userfield-3-car
                </div>
            </div>
        </div>
        <div class="product-titlesidebar">
            CAR TITLE BRAND CATEGORY MODEL-THIS SHOULD NOT BE AFFECTED BY THE OVERLAY HOVER
        </div><!--</div>--></a>
    </div>

Answer 1

问题1：

将.read-more{position: absolute}移动到@media标记之外以对其进行修复。不知何故，当我在Stack Overflow片段工具中对其进行测试时，它可以正常工作。

问题2：

在$("#read-more").click(function() {中，将read-read视为ID。

read-more是一个类，而不是ID，请用$(".read-more").click(function() {代替

在那里，它现在应该可以工作了。 ;）

更新：

哎呀，搞砸了。我认为最适合您的解决方案是在不使用叠加层时将其放在height: 0px;处。您正在使用JQuery对吗？只要有人点击它就运行它。 $(".read-more").css("height", "(the height)");您也可以使用display: none和visibility: hidden