背景图像 div 可点击

Question

我有一个带有背景图片的 div。如何使 div （背景图像）可点击？单击 div（图像）时，我想取消隐藏另一个 div。点击代码：onclick="javascript:unhide('kazen')"

    var clickit = document.getElementsByClassName("fh5co-grid")[0];
    		var kazen = document.getElementById("kazen");
    
    		clickit.addEventListener("click", function(){
    			if (kazen.style.display === "none") {
    				kazen.style.display="block";
    			} else {
    				kazen.style.display="none";
    			}
    		});
    
    		kazen.addEventListener("click", function(){
    			this.style.display="none";
    		});

    #kazen {
      background-color: #cc9;
      display: none;
      width: 100px;
      height: 100px;
      position: absolute;
      top: 15px;
      left: 15px;
    }
    
    .fh5co-grid {
    }

    <div class="col-md-4 col-sm-6 ">
    									<div class="fh5co-grid" style="background-image: url(images/PREVIEW_Shop_02-29.jpg);">
    										<a class="image-popup text-center" >
    											<div class="prod-title ">
    												<h3>Kaas</h3>
    												<h4>in ons aanbod hebben we verse en harde kazen - binnenkort meer hierover</h4>
    											</div>
    										</a>
    									</div>
    								</div>
    
    								<div id="kazen" >
    									<div class="col-md-12">
    										<div class="fh5co-grid" style="background-image: url(images/Melkerhei_Dag2-16-4.jpg);">
    											<a class="image-popup text-center" >
    												<div class="prod-title ">
    
    												</div>
    											</a>
    										</div>
    									</div>
    
    								</div>

Answer 1

根据您的描述，这似乎非常接近。背景图像不可点击，它是 div 本身。这可以用 jQuery 来完成，是的，但是很简单，纯 javascript 在这里很容易。单击红框区域将显示 id 为 kazen 的 div，再次单击 kazen 或红框区域将隐藏它。

注意，我的解决方案有一个奇怪的故障。我更改了显示 if/else 以检查它当前是否显示并隐藏它，而不是它当前是否隐藏以显示它。这导致了在第一次点击时重新隐藏喀山 div 的奇怪效果。

在 stackoverflow 中，您需要一个绝对网址来显示图像。如果您没有在此处看到您的图像，这可能就是原因。

var clickit = document.getElementsByClassName("fh5co-grid")[0];
var kazen = document.getElementById("kazen");

clickit.addEventListener("click", function(){
  if (kazen.style.display === "block") {
    kazen.style.display="none";
  } else {
    kazen.style.display="block";
  }
});

kazen.addEventListener("click", function(){
  this.style.display="none";
 });

#kazen {
  background: url("https://static.pexels.com/photos/6832/waterfall-beauty-lets-explore-lets-get-lost.jpg");
  background-size: 100%;
  display: none;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 15px;
  left: 15px;
  color: #fff;
}

.fh5co-grid {
  border: 1px dotted red;
}

<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(images/PREVIEW.jpg);">
  <a class="image-popup text-center">
    <div class="prod-title ">
      <h3>cheese</h3>
      <h4>tekst</h4>
    </div>
  </a>
</div>
</div>
<div id="kazen">
  Click me to hide!
  </div>

Answer 2

如果这是你想要的，你可以看看我创建的fiddle。

$(document).ready(function() {
  $("div.fh5co-grid").click(function() {
    $("div.next").css("display", "block");
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-6 ">
  <div class="fh5co-grid" style="background-image: url(http://placehold.it/350x150);">
    <a class="image-popup text-center">
      <div class="prod-title ">
        <h3>cheese</h3>
        <h4>tekst</h4>
      </div>
    </a>
  </div>
</div>

<div style="background-color: #000; display:none" class="next">Next div</div>