如何将iframe移向右侧？

我目前正在研究每当用户悬停在链接上时，即时预览显示在链接下面的功能。这样的 -如何将iframe移向右侧？

我想要做的是，只要用户将鼠标悬停在链接，IFRAME应该转移向右，就像谷歌即时预览。

<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;，但没有任何反应。如果有人能帮助我，这将非常有帮助。 :)

来源

2017-03-28 Harshit Prasad

如果你是绝对定位，float将无济于事。也许尝试吧：0？ –

@RachelS感谢您给我的问题:)。 '也许尝试正确'与哪个属性？ –

请参阅下面的答案。 –

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

我只是使用的不透明性和visibilityto在动画淡入时，你可以使用任何其他方法，如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>

重要提示：

如果你想投入大量的I帧，对他们使用的页面延迟加载。简单地只需更换SRC ATTR当有人悬停在标题或使用脚本，例如 http://dinbror.dk/blog/blazy/否则页面加载很慢，使大量冻结等

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

来源

2017-03-28 20:46:58 Isu

感谢您给我的问题留出时间。 :)是啊，页面加载非常缓慢，并使得很多冻结。解决方案将有所帮助。但问题是，我想将iframe转向右侧。当鼠标悬停在链接上而不是向下显示时，您提供的jsfiddle必须显示在右侧（就像google即时预览一样）。根据我的代码，我应该怎么做？ –

啊，对不起，你可以使用像https://jsfiddle.net/fxdhcrxj/3/ 或类似https://jsfiddle.net/fxdhcrxj/4/ – Isu

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

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

你需要有框right:0;集。此外，你的.box被设置为100％宽度，这就是为什么iframe不知道该去哪里。你必须选择：要么设置框宽度400像素，这是一样的iframe（这是我在codepen所做的那样）：

.box { 
    display: none; 
    width: 400px; 
}

，或者您可能离开100％的宽度，但再加入text-align:right;到.box类。两者都有效。

.box { 
    display: none; 
    width: 100%; 
    text-align: right; 
}

来源

2017-03-29 13:47:42

如何将iframe移向右侧？

回答

相关问题