Question

我有一张图片，我想添加一些效果。悬停覆盖div我能够添加它。现在我要做的是添加onclick个事件并更改为另一个叠加层div。

这是我的代码，或查看CodePen Here

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

我只有悬停效果，当我点击它时应将Plus（+）更改为减号（ - ）并在图像div的底部显示一个小div，其中将放置一个小描述。< / p>

当第二个叠加div被触发时，我按下减号（ - ）它应该改回来。我将在这里添加一个图像，以便您可以看到我正在尝试做什么。

在下面的图片中，您可以看到应显示div事件的蓝色onclick。

enter image description here

Answer 1

使用jquery

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

  trigger.click(function(){
     overlay.toggle('fast');
  })
});

Answer 2

首先，图像看起来是内容所以它应该内联HTML而不是背景图像，我已经在此基础上进行了。

Forked Codepen Demo

修改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明智，我利用绝对定位，伪元素和一点CSS3变换来实现一切。后者允许灵活地更改伪元素的+/-和边框大小（箭头）的一些字体大小选择。

<强> 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%);
}

最后，通过.toggleClass添加点击（或主动）互动的小JQuery。

<强> Jquery的

(function($) {
   $(".plus").click(function () { 
     $(this).parent().toggleClass("clicked");
    });  
})(jQuery);

Onclick事件触发另一个叠加div

2 个答案: