Question

请参阅以下链接以获取图像和图表。 Image，diagram这是示例图片。这里的“消息”标题是左边的一个单独的div浮动“Joe Smith和你”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

使用此方法，您不必首先使用两个div作弊，只需将背景图像应用于div上。

看一下this example，右侧边距动画显示为悬停时为负值。

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

1 个答案: