javascript - 如何启用和修复链接悬停时的预览页面？

Question

如何无法对网页中的所有链接进行网站预览功能？也就是说，当用户将鼠标移动到页面中的任何链接上时，我想显示一个简单的弹出窗口，该窗口在链接中加载页面。我尝试在 Google 和 stackoverflow 的帮助下自己做。但结果是这样的 -

(实际页面链接呈现)

我应该如何解决这个问题？我想要它类似于 Google 即时预览。

这是我的代码 - (网站链接是从网络服务获取的)

html 文件

 <div class="text-result" *ngIf="Display('all')">
                <div *ngFor="let item of items$|async" class="result">
                    <div class="frame">
                        <script>
                            $(".head-link").mouseover(function() {
                                $(this).children(".tooltip").show();
                            }).mouseout(function () {
                                $(this).children(".tooltip").hide();
                            });
                        </script>
                        <div class="title">
                            <a href="{{item.link}}" class="head-link">{{item.title}}
                            <iframe id="tooltip" src="{{item.link}}"></iframe>
                            </a>
                        </div>
                    </div>
                    <div class="link">
                        <p>{{item.link}}</p>
                    </div>
                    <div>
                        {{item.pubDate|date:'fullDate'}}
                    </div>
                </div>
            </div>

CSS 文件

.head-link {
  color: #069;
  cursor: pointer;
}

.tooltip {
  display: none;
  position: absolute;
  border: 1px solid #000;
  width: 400px;
  height: 400px;
}

Answer 1

I setup a minimal JS fiddle for you, and I believe I resolve the issue.

我的更改摘要是:

• 当您将其引用为 .tooltip 时，您的 iframe 有一个 id=tooltip，因此我将其更改为 class=tooltip。
• 您的 jQuery 脚本必须出现在页面上它所使用的元素之后，因此我将脚本标记移至 class=text-results div 的底部。

两个注意事项:

• 首先，这不是 Angular 2 问题，您在项目中使用了 Angular 2，但问题出在您的 jQuery 代码上。
• 其次，您确实应该避免使用 jQuery 来解决 Angular 2 项目中的问题。 Angular 2 能够解决这个问题，而无需包含 jQuery。混合 jQuery 和 Angular 2 会导致代码困惑且难以理解，最好只使用 Angular 2 来解决这个问题。