Klicken Sie auf das Symbol, um das Overlay anzuzeigen

Question

Ich habe ein gelbes Fa-Symbol in der Mitte. Dies gilt nur für Bildschirme kleiner als 767px. Darüber zeigt das Overlay beim Überfahren. Jetzt für das < 767px Display möchte ich den Hover-Over-Effekt auf dem Fa-Symbol. Aber das geht nicht (wahrscheinlich wegen der .overlay darüber) = Problem 1. Auch versuche ich, dass beim Klicken auf das Fa-Symbol, das dann das Overlay zeigt. Das funktioniert jetzt einfach nicht (= Problem 2). Wie löst man diese?

//$("#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; 
 
\t \t opacity:0.7; 
 
     color: #888; 
 
     position: absolute; 
 
     left: 50%; 
 
    \t top: 50%; 
 
    \t transform: translate(-50%,-50%); 
 
    } 
 
\t 
 
\t .read-more i:hover { 
 
\t \t color:#FFF; 
 
\t \t background-color:#000; 
 
\t } 
 
    }

<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> 
 
\t \t \t \t </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

Problem # 1:

Verschieben .read-more{position: absolute} außerhalb des @media Tag, es zu beheben. Irgendwie, als ich es im Stack Overflow-Snippet-Tool getestet habe, funktionierte es.

Problem # 2:

In $("#read-more").click(function() {, behandeln Sie schreib mehr als eine ID.

Lese mehr eine Klasse ist, nicht eine ID, ersetzen Sie es mit $(".read-more").click(function() {

Es sollte nun funktionieren. ;)

Update:

Whoops, vermasselt. Ich denke, die beste Lösung für Sie wäre, das Overlay bei height: 0px; zu haben, wenn Sie es nicht verwenden. Sie verwenden JQuery richtig? Führen Sie das einfach aus, wenn jemand darauf klickt. $(".read-more").css("height", "(the height)"); Sie könnten auch etwas ähnliches mit Dingen wie display: none und visibility: hidden