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

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.

我的更改摘要是：

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

两个音符：

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