Onclick-Ereignis auszulösen, ein weiteres overlay div

Ich habe ein Bild, möchte ich hinzufügen, dass einige Effekte. Hover-overlay div ich war in der Lage, um es hinzuzufügen. Nun, was ich tun möchte hinzufügen onclick Ereignis und zu einem anderen overlay div.

Hier ist mein code, oder Sie sehen die CodePen Hier

  <div id="box">

  <div id="overlay">
    <span id="plus">+</span>
  </div>

CSS:

body    {  background:#e7e7e7;}
#box    {  width:300px;
           height:200px;
           float: left;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
          border-bottom:2px solid #fff;
          border-right:2px solid #fff;
          margin:5% auto 0 auto; 
          background:url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
  background-size:cover;
border-radius:5px;
overflow:hidden;}

#overlay    {  background:rgba(0,0,0,.75);
               text-align:center;
               padding:45px 0 66px 0;
               opacity:0;
               -webkit-transition: opacity .25s ease;}

#box:hover #overlay {
               opacity:1;}

#plus       {  font-family:Helvetica;
               font-weight:900;
               color:rgba(255,255,255,.85);
               font-size:96px;  }

Habe ich nur hover-Effekt, wenn ich auf ändern sollte Plus (+) zu Minus (-) und unten auf dem Bild div erscheint ein kleines div, wo platziert eine kleine Beschreibung.

Wenn das zweite overlay-div wird ausgelöst, und ich drücke wieder auf Minus ( - ), sollte es wieder ändern. Ich will hinzufügen, hier ein Bild, so dass Sie sehen können, was ich versuche zu tun.

In der Bild Balg können Sie sehen, die Blaue div erscheinen soll onclick Veranstaltung.

Onclick-Ereignis auszulösen, ein weiteres overlay div

  • Was haben Sie bisher ausprobiert? Vielleicht könnten Sie zeigen uns Ihre JS/Jq der bisherigen Bemühungen. Auch Sie können nicht re-verwenden Sie ID ' s, wie Sie getan haben in Ihrem Codepen.
InformationsquelleAutor Valeri Crudu | 2014-05-29
  1. 1

    Erstens, das Bild scheint zufrieden zu sein, also es sollten inline-HTML-und nicht ein hintergrund Bild und habe ich weiter auf dieser basis.

    Gabel-Codepen-Demo

    Überarbeitete HTML -

    <div class="box">
  <img src="http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg" alt="" />
  <div class="overlay">
    <h1 class="plus"></h1>
  </div>
  <div class="description">
    <p>Lorem ipsum dolor.</p>
  </div>
</div>

    CSS-Weise, die ich getroffen haben den Vorteil der absoluten Positionierung pseudo-Elemente und ein wenig CSS3 transformieren, um alles im Ort. Letzteres ermöglicht eine Flexibilität bei der änderung einiger font-sizing Entscheidungen für die +/- und Rahmen-Größen von pseudo-element (Pfeil).

    CSS

    * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.box    {  
  width:300px;
  height:200px;
  box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
  border-bottom:2px solid #fff;
  border-right:2px solid #fff;
  margin:5% auto 0 auto; 
  border-radius:5px;
  overflow:hidden;
  position: relative;
}

.box img {
  display: block;
}

.overlay    {
  position: absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background:rgba(0,0,0,.75);
  text-align:center;
  opacity:0;
  -webkit-transition: opacity .25s ease;
}

.box:hover .overlay {
  opacity:1;
}

.overlay .plus:before { 
  content:"+";
  margin: 0;
  padding: 0;
  position: absolute;
  top:50%;
  left:50%;
  font-family:Helvetica;
  font-weight:900;
  color:rgba(255,255,255,.85);
  font-size:6rem;
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
}


.overlay.clicked .plus:before {
  content:"-";
}

.description {
  display: block;
  position: absolute;
  width:100%;
  height:30%;
  background-color: lightblue;
  bottom:-30%;
  text-align: center;
  transition: bottom 0.25s ease;
}

.description:after {
  content:"";
  position: absolute;
  width:0;
  height:0;
  left:50%;
  border-style:solid;
  border-color: transparent transparent lightblue transparent;
  border-width: 16px;
  top:0;
  -webkit-transform:translate(-50%, 100%);

}

.overlay.clicked + .description {
  bottom:0%;
}

.overlay.clicked + .description:after {
  -webkit-transform:translate(-50%, -100%);
}

    Schließlich, ein wenig JQuery hinzufügen geklickt (oder aktiv) Interaktion durch .toggleClass.

    Jquery

    (function($) {
   $(".plus").click(function () { 
     $(this).parent().toggleClass("clicked");
    });  
})(jQuery);
    • Schön... 🙂 vielen Dank, schätzen Sie es
    InformationsquelleAutor Paulie_D
  2. 1

    jquery

    $(document).ready(function(){
  var trigger = $(".plus");
  var overlay = $(".overlay");

  trigger.click(function(){
     overlay.toggle('fast');
  })
});
    • Ich bin mir nicht sicher, wie Sie Sie umsetzen trigger-Ereignis. 🙁
    • verwenden Sie das Skript, wie es gerade ändern Sie die Klasse(.überlagerung), um die überlagerung, die Sie zeigen wollen, wenn Sie klicken Sie auf die plus-Schaltfläche
    InformationsquelleAutor Immortal Dude
Schreibe einen Kommentar