html - 将鼠标悬停在图像上时，可滚动的 div 不可滚动

Question

我有这个例子：

<div class="container">
   <div class="box">
      <object class="object" data="http://www.marketingvox.com/wp/wp-content/uploads/2009/12/darpa-balloon.thumbnail.jpg">
      <img class="image" src="http://www.marketingvox.com/wp/wp-content/uploads/2009/12/darpa-balloon.thumbnail.jpg">
     </object>
   </div>
</div>


.container {
width: 200px;
height: 500px;
overflow: scroll;
background: red;
}

.box {
top: 20px;
left: 20px;
width: 50px;
height: 1000px;
position: relative;    
}

.object {
position: absolute;
}

.image {
top: 50px;
position: absolute;
cursor: pointer;
}
}

http://jsfiddle.net/aS972/1/

将鼠标悬停在图像上，您将无法滚动，将鼠标悬停在图像之外，您将可以滚动。即使将鼠标悬停在图像上，我也需要能够滚动。

我究竟做错了什么？

Answer 1

很多时候，使用 Flash 视频，您必须<param name="wmode" value="transparent" />在<object>标签内添加一个 html 来渲染它并触发事件（如滚动）。

希望这可以引导某人找到正确的答案。

Answer 2

对象标签导致问题。如果您只在对象内部显示图像，为什么不只使用图像标签？

http://jsfiddle.net/bSaBm/

<div class="container">
    <div class="box">
        <img class="image" src="http://www.marketingvox.com/wp/wp-content/uploads/2009/12/darpa-balloon.thumbnail.jpg"/>
    </div>
</div>

Answer 3

编辑 2 我删除了object这个小提琴中的。它在示例http://jsfiddle.net/aS972/6/中没有任何作用。但是，如果您必须保留它，请像其他人已经说过的那样在对象块中使用它。

<param name="wmode" value="transparent">

编辑

好的，您的问题是您的内容甚至不超过 500 像素，因此您无法知道它是否可滚动。如果您添加更多类似http://jsfiddle.net/aS972/5/的内容，它可以正常工作。将 设置为height会auto导致.container框扩展为 的大小.box，因此可以滚动，因为它太高了。

将您的容器 css 更改为“高度”为“自动”。将“.box”高度设置得更大似乎会搞砸。

.container {
width: 200px;
height: auto; //this changes to auto
overflow: scroll;
background: red;
position: relative; //add relative for good measure.
}