如何在链接悬停上启用和修复预览页面？

Question

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

（实际页面链接渲染）

我该如何解决这个问题？我希望它与谷歌即时预览类似。

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

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.

我的更改摘要是：

• 当您将iframe引用为id=tooltip时，您的iframe有.tooltip，因此我将其更改为class=tooltip。
• 您的jQuery脚本必须显示在页面上的元素之后，因此我将脚本标记移动到class=text-results div的底部。

两个注释：

• 首先，这不是Angular 2问题，你在项目中使用Angular 2，但问题在于你的jQuery代码。
• 其次，你真的应该避免使用jQuery来解决Angular 2项目中的问题。 Angular 2有能力解决这个问题，而无需包含jQuery。混合使用jQuery和Angular 2会导致代码混乱且难以理解，只需使用Angular 2来解决这个问题就好了。