Question

我有以下文件，我在小提琴http://jsfiddle.net/3tt0hxo4/上重新创建。一个大图像（不是顶部的小图像也是一个链接）是我希望能够在我将鼠标悬停在它上面时变得更大的图像。现在我还没有尝试过，但是我很确定如果我做一个简单的命令，当我将鼠标悬停在图像上时会更大，这将导致文本被移动而不是我想要的。我希望图像能够像放在文本顶部一样展开，因此文本会消失（或者几乎所有文本都会消失）并且图像只是展开它。

我试图在谷歌上找到如何做到这一点，但无法找到任何可以帮助我的东西。我发现了一个帮助论坛帖子，其中说了一些关于创建一个隐藏在文本顶部的不可见div的内容，但我对此完全感到困惑，当我尝试将其设置为适合时，作为示例提供的代码不起作用是）我有的。代码看起来像这样

div#cover {
    float:left;
    width:200px;
    height:200px;
    overflow:hidden;
}

div#cover:hover {
    width:600px;
    height:auto;
}

Answer 1

在你的小提琴中试试这个。

#pic {
    background-color: #575c55; 
    z-index:1;
    border-width: 1; 
    border: solid;     
    text-align: left;
    width: auto; 
    height: 355px;
}

#pic img:hover {
    height: 355px;
    width:97%;
    margin:0 0;
    z-index:5; 
    position:absolute;
    background:white;
}

它在悬停时选择图像并使其成为div的整个宽度和高度，将其放在文本的顶部。

悬停会产生更大的图像，而不会移动文本

1 个答案: