Question

我被创建了一个项目。首先，我在相册上进行了悬停效果，但现在我想进行一次单击事件。我正在尝试使此操作正确但没有完成。

我将给出链接：http://ihannoveraner.de/servicebieter/profile.html 单击“链接”后，将打开参考页面。您可以在图像上看到悬停效果。我需要单击该位置并打开弹出窗口

我的 Jquery 代码是：

    $('.ref-img').hover(function () {
        $('#MyPopup #albums a').html($(this).html());
        $("#MyPopup").modal("show");
      });

我的 HTML 代码：

 <div id="albums"><a href="images/our/01.jpg" class="ref-img">
  <div class="zoom-i">
   <img class="primary" src="images/our/02.jpg">
  <div class="popular-overlay">
 <strong>Logo Design</strong>
</div>
</div>
<img class="secondary-1" src="images/our/03.jpg">
<img class="secondary-2" src="images/our/04.jpg">
<div class="meta">
album 1
</div>
</a>
 </div>

我的模式是：

  <div id="MyPopup" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    &times;</button>
                <h4 class="modal-title">
                </h4>
            </div>
            <div class="modal-body">
                <div id="albums">
                    <a>

                    </a>
                </div>
            </div>

        </div>
    </div>
</div>

上面显示代码。从悬停时的这段代码中，图像显示在模型中，但是现在我试图在单击后显示模式。其次，当弹出窗口打开时， popular-overlay ID将使用不透明度1 显示。我正在尝试这样构建

link

Answer 1

您可以使用以下两种方法执行此操作：

使用html中的onClick属性。 onClick="functionName()"
在jquery中对项目类使用click函数。

您可以看到此链接以供参考：

https://jsfiddle.net/audetwebdesign/rQdZR/

jQuery的悬停点击事件

1 个答案: