Проблема с iframe и наложенной кнопкой

Question

Я использую iframe, теперь я хочу, чтобы внутри iframe справа вверху была кнопка, которая будет отображаться только при наведении мыши. Как я могу добавить эту кнопку? Может кто-нибудь, пожалуйста, помогите мне в правильном направлении.

Answer 1

JQuery

$(function() {
    var close = $('#close');
    $('#frame').hover(function() {
        close.show();
    }, function() {
        close.hide();
    });
});

HTML

<div id="frame">
    <iframe src="http://example.com"></iframe>
    <div id="close">Close</div>
</div>

CSS

#frame {
    width: 400px;
    height: 300px;
    position: relative;
}

#frame iframe {
    width: 100%;
    height: 100%;
}

#close {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    border: 1px solid red;
    background: #fff;
    padding: 5px;
}

jsFiddle .

Имейте в виду, что это скрывает часть iframe. Было бы лучше, если бы не сделал это.