如何将iframe转向右侧？

Question

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

我想要做的是，只要用户将鼠标悬停在某个链接上，iframe就会向右移动，就像在 Google即时预览中一样。

<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，请在页面上使用Lazy加载。 当有人将鼠标悬停在标题上或使用脚本时，只需替换src attr即可 http://dinbror.dk/blog/blazy/否则你的页面加载速度会非常慢并且会造成很多冻结等。

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

Answer 2

在这里：http://codepen.io/ruchiccio/pen/vxVoKd

typeid

您需要为此框设置a:hover + .box, .box:hover { display:block; position: absolute; right:0; top:0; z-index:100; } 。此外，您的.box设置为100％宽度，这就是iframe不知道去哪里的原因。您必须选择：将框宽设置为400px，这与iframe相同（这是我在我的代码中所做的）：

right:0;

或者您可以保留100％的宽度，然后将.box { display: none; width: 400px; } 添加到.box类。两者都有效。

text-align:right;