html - 如何将 iframe 向右移动？

Question

我目前正在开发一项功能，只要用户将鼠标悬停在链接上，即时预览就会显示在链接下方。像这样 -

我想做的是，每当用户将鼠标悬停在链接上时，iframe 应该向右移动，就像在 Google Instant 预览 中一样。

<div class="title" (mouseover)="overTitle()" (mouseleave)="overTitle()">
                    <a href="{{item.link}}">{{item.title}}</a>
                    <div class="box">
                        <iframe width="400px" height="400px" [src]="myUrlList[i]"></iframe>
                    </div>
                </div>

CSS 文件 -

 .box {
      display: none;
      width: 100%;
    }

    a:hover + .box, .box:hover{
      display:block;
      position: absolute;
      z-index:100;
    }

我尝试在 div 标签中使用 align="right"，但没有任何反应。同样在 CSS 的 .box 类中，我尝试使用 float: right;，但没有任何反应。如果有人可以帮助我，那将非常有帮助。 :)

Answer 1

检查类似的东西，没有 JS，纯 CSS。 https://jsfiddle.net/fxdhcrxj/2/

我只是使用不透明度和可见性来动画淡入淡出，你可以使用任何其他方法，如 JS 淡入淡出等。

在 CSS 中如果你想捕捉下一个元素使用 ~

CSS:

.title{
    // for proper position absolute element inside
    position: relative;
}

// We catch nexy element .box, and when some one hover over box
.title a:hover ~.box, .title .box:hover{
    //display: inline;
  visibility: visible;
  opacity: 1;
}
// As i use element to bottom 0, I must translated it 100% below of his height.
.title .box{
    //display: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
  position: absolute;
  z-index: 10;
  background: #fff;
  bottom:0;
  left:0;
  transform: translateY(100%);
}

HTML:

<div class="title" >
    <a href="#">TITL0E</a>
    <div class="box">
        <iframe width="400px" height="400px" src="https://www.w3schools.com"></iframe>
    </div>
</div>

重要提示:

如果您想要放置大量 Iframe，请在页面上对它们使用延迟加载。 当有人将鼠标悬停在标题上或使用脚本时，只需替换 src attr 例如 http://dinbror.dk/blog/blazy/否则你的页面加载速度会很慢，而且会经常卡住等等。

为了更好的移动支持，您还可以在元素上使用 focus，而不仅仅是悬停