asp.net - 显示图像从一个 div 溢出到另一个 div

Question

图片和图表请引用以下链接。 Image , diagram这是示例图像。这里“消息”标题是一个单独的 div float 在左侧，“Joe Smith and you”div float 在右侧。在左侧，所有消息都在单独的 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 .

使用这种方法，您不必一开始就使用两个 div 作弊，只需在一个 div 上应用背景图像即可。

---

看看this example右边距在悬停时动画变为负值。