悬停后如何使div可点击

Question

悬停后如何使此img可点击？

<div class="mix col-lg-6 col-md-6 digital">
  <a href="img/Photography/hotel2/LRM_EXPORT_150328983362756_20180927_162750874.jpeg" class="portfolio-item set-bg " data-setbg="img/Photography/hotel2/LRM_EXPORT_150328983362756_20180927_162750874.jpeg">
    <div class="pi-inner">
      <h2>OPEN GALLERY</h2>
    </div>						
  </a>
</div>

Answer 1

将点击事件添加到类似的标记中，

<a href="img/Photography/hotel2/LRM_EXPORT_150328983362756_20180927_162750874.jpeg" class="portfolio-item set-bg " data-setbg="img/Photography/hotel2/LRM_EXPORT_150328983362756_20180927_162750874.jpeg" onclick="doStuff()">

在doStuff（）中，执行单击图像时需要执行的任何操作。

Answer 2

使用javascript，您可以这样做：

var clickable = false;
var img = document.getElementById('IdOfyourELement');

img.addEventListener('mouseenter', function(){
    clickable = true;
});
img.addEventListener('mouseleave', function(){
    clickable = false;
});

img.addEventListener('click', function(){
    if(clickable) {
        //doWhatEverThing
    }
});

您也可以尝试将clickable变量添加到元素中，以避免使用全局变量。 像这样：

img.clickable = false;
img.clickable = true;