Question

我有一个带背景图片的div。如何使div（背景图像）可点击？我想在点击div（图像）时取消隐藏另一个div。 Onclick代码：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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

在stackoverflow中，您需要一个绝对URL来显示图像。如果你没有在这里看到你的形象，那可能就是原因。

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>

背景图像div可点击

2 个答案: