iframe을 오른쪽으로 이동하는 방법은 무엇입니까?

Question

현재 사용자가 링크를 가리킬 때마다 즉시 미리보기가 링크 아래에 표시되는 기능을 사용하고 있습니다. 사용자가 링크를 가리킬 때마다

이다 내가하고 싶었던

, 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;을 사용했지만 아무 일도 일어나지 않았습니다. 누군가가 나를 도울 수 있다면 그것은 많은 도움이 될 것입니다. :)

Answer 1

JS, 순수한 CSS없이 그런 식으로 확인하십시오. 난 그냥 불투명도를 사용하고 페이드 애니메이션 visibilityto하고 다음 요소를 사용 잡을 것인지 알아, 당신은 CSS에서 등

아웃 JS 페이드와 같은 다른 방법을 사용할 수 있습니다 https://jsfiddle.net/fxdhcrxj/2/

~

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이의 넣어 많은,합니다. 사람뿐만 아니라 가져가, 제목 또는 사용 스크립트 http://dinbror.dk/blog/blazy/ 그렇지 않으면 페이지가 정말 느린로드 예 위로 마우스를 이동하고 당신은 또한 요소에 focus를 사용할 수 있습니다 정지 등

더 나은 모바일 지원에 대한 정보를 많이 할 때 는 단순히 SRC의 ATTR 교체 여기

Answer 2

당신은 이동 : 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은 어디로 가야할지 몰랐습니다. 당신은 옵션이 있습니다

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

또는 당신이 100 % 너비를 남겨 그러나 text-align:right;을 추가 할 수 있습니다 : 하나는 (내 codepen에 무슨 짓을했는지입니다) iframe이 같은 인 ~ 400 상자의 너비를 설정 .box 클래스. 둘 다 작동합니다.

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