显示从一个 div 到另一个 div 的图像溢出

Question

图片和图表请参考以下链接。 Image, diagram 这是示例图像。这里“消息”标题是左侧的单独 div 浮动 “Joe Smith and you” div 右侧浮动。在左侧，所有消息都在单独的 div 中。现在我需要更改悬停时的背景图像，如下所示（如蓝色箭头）。背景图片需要从左div溢出到右div。我尝试了以下代码，但它不起作用。它被切割成适合 div 大小。我需要像在图像中一样显示完整的图像。

 <div onmouseover="this.className='msgHover'"></div> `

上面是div上的代码。我的css类是

.msgHover
    {
        background-image: url('Images/MsgHighlight.png');
        overflow:auto;
    }

Answer 1

您不能只是让背景图像溢出div 的边界。但是，您可以使用负的右边距使整个 div 溢出它自己的边界：

#mydiv:hover
{
    margin-right: -50px;
}

这将使整个div 变得更宽，而不会推动任何其他元素或影响网站的布局。这听起来正是你想要做的。 Here's an example.

使用这种方法，您不必首先使用两个divs 作弊，只需将您的背景图像应用到一个div 上。

---

看看this example，右边距在悬停时变为负数。