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

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

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

修改

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

将容器css更改为'height'为'auto'。将'.box'的高度设置得更大似乎搞得一团糟。

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

Answer 3

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

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>

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

3 个答案: