Question

我有2个元素，我想要包装并取消他们的活动。一个是iframe而另一个是对象..

   <a href="http://google.com">
<iframe src="http://pldaflix.com/video/54312" width="500" height="415" frameborder="0"></iframe>
</a>


     <a href="http://google.com">
<object height="400" width="500"><param name="allowfullscreen" value="false">
<param name="AllowScriptAccess" value="always">
<param name="movie" value="http://embed.rede.com/player/">
<param name="FlashVars" value="id=97219&&autostart=false">
<embed src="http://embed.rube" allowfullscreen="false" AllowScriptAccess="always"
flashvars="autostart=false" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" 
type="application/x-shockwave-flash" height="400" width="500" /></object>

</a>

我想用html或css覆盖他们的事件，而不是使用javacript ..但javascript选项也是一个选项..

如何使用链接事件覆盖对象事件和iframe？

更新：

我想做这样的事情：

        <div id="wrapper" style="position:relative;">
        <a href="http://google.com">
        <div style="position:absolute; width:100%; height: 100%; z-index: 9999; background-color:blue;">
            <div style="position:absolute; width:100%; height: 100%; z-index: 0;">
                <iframe src="http://playflix.com/video/54312" width="500" height="415" frameborder="0"></iframe>
            </div>
            </a>
        </div>
    </div>

将iframe的div放在链接div的下方..

不起作用..但我认为解决方案应该沿着这些方向

另一种方法是使用javascript来禁用点击div

更新

我需要一个简单的解决方案。解决方案是将div放在iframe上面

Answer 1

假设jQuery：

$("iframe").click(function(){
   window.location = <yourDesiredHref>;
});

同样适用于该物体。

Answer 2

您可以通过将对象放在对象之前并为其提供绝对位置来使链接覆盖对象。请参阅小提琴，例如：http://jsfiddle.net/sveinatle/BP9xc/4/

重要的一点是：

<div class="container">
    <a id="overlay" href="http://google.com"></a>
    <iframe src="http://www.example.com" width="500" height="415" frameborder="0"></iframe>
</div>

并设置样式以使链接覆盖对象：

.container{
    position:relative; 
    border: 2px solid red;
    overflow:hidden;
}
#overlay{
    display:block; 
    position:absolute; 
    width:100%;
    height:50%;
    background-color:rgba(255,0,0,0.5);
}

Answer 3

使用html / css你可以尝试这样的事情：

在对象
使其与iframe和对象组合一样高（如果不使用任何填充/边距，则为815px）
使其与更大的元素（500px）
将其定位，使其覆盖其他元素，例如margin-top:-500px; 给它一个display:block;和一个比其他两个元素更大的z-index只是为了确保它在顶部
在其中/周围放置一个链接，其大小与“叠加”一样大

你也可以试试是否可以在元素周围加上“叠加”，然后用z-index将其置于顶部。

如何用链接包装元素覆盖它的事件？

3 个答案: