Question

我正试着这样做，以便当我将鼠标悬停在<img>标签上时，会出现一个div。我希望它是一个带有文本的白色叠加层。

我无法像我想的那样使图像成为背景图像。我的代码使用宽度：百分比/最大宽度：像素和高度：自动/最大高度：像素，因此如果没有img，则不会显示任何内容。据我所知，这个问题没有解决办法。

我试图给图像一个唯一的ID并应用一个id：hover .class来显示div，但是它没有响应我给它的任何编码，更不用说正常了。然后我尝试将id放在它自己的div上，然后将它放在图片上，仍然没有收益。

我还尝试将图像作为背景图片制作div，并根据需要进行悬停。我试图通过放入另一个具有图像约束的div来使div不内爆，但由于高度：auto，它不起作用。

我拒绝将高度/宽度设置为像素，因为它会破坏我编码的其余部分，这也是我编码我的主要原因之一。所以，如果由于这个原因不可能，那很好;告诉我。

我的CSS如下：

#logo { 
    text-align: center;
    width:100%;
    max-width:769px;
    height:auto;
    overflow:hidden;
}

#bannerpic {
    max-width:769px;
    max-height:300px;
    width:100%;
    height:auto;
}

#bannerpic .logobody {
    display:none;
}

#bannerpic:hover .logobody {
    display:inline;
    background-color:rgba(255,255,255,0.5);
    width:100%;
    height:100%;
}

我的HTML是这样的：

<div id="logo">
    <img id="bannerpic" src="https://dl.dropboxusercontent.com/u/67673862/logoTEMP.png">
        <div class="logobody">text</div>
    </img>
</div>

Answer 1

我不知道您是否需要能够单击图像，但您可以使用绝对定位覆盖文本。

#logo {
    text-align: center;
    height: auto;
    overflow: hidden;
    position: relative;
    max-width: 469px;
}

#bannerpic {
    width: 100%;
    height: auto;
}

.logobody {
    position: absolute;
    background-color: pink;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
}

.logobody:hover {
    opacity: 1;
}

<div id="logo">
    <img id="bannerpic" src="https://dl.dropboxusercontent.com/u/67673862/logoTEMP.png" />
    <div class="logobody">text</div>
</div>

Answer 2

这个怎么样：

#logo {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
}

.logobody {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    background-color: rgba(255,255,255,0.75);
    visibility: hidden;
    height: 100%;
    width: 100%;
}

#logo:hover .logobody{
  visibility: visible;
}

#bannerpic {
    max-width:769px;
    max-height:300px;
    width:100%;
    height:auto;
}

这是一个JSFiddle链接：

https://jsfiddle.net/zVBDc/790/embedded/result/

注意：我的例子是使用0.75 alpha作为背景。 0.5似乎太低了。不过，请将它设置为您喜欢的任何内容。

将鼠标悬停在<img/>上以制作新的div

2 个答案: