Question

我的中心有一个黄色的fa图标。这仅适用于小于767px的屏幕。在上方，叠加显示在悬停时。现在对于＆lt; 767px显示器，我想在fa-icon上悬停效果。但这不起作用（可能是因为它上面有.overlay）=问题1。此外，我在点击叠加显示的fa图标时尝试此操作。现在这根本不起作用（=问题2）。如何解决这些问题？

＆＃13;

.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;
	}
  }

＆＃13;

<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>

＆＃13;

for (kkk....

＆＃13;

Answer 1

问题＃1：

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

问题＃2：

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

read-more是一个类，而不是id，用$(".read-more").click(function() {

替换它

那里应该现在正在运作。 ;）

<强>更新

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

等内容执行类似操作

单击图标以显示叠加层

1 个答案: