DIV与文本在悬停的图像上

Question

好的，首先，这与http://dribbble.com主页非常相似。

以最简单的形式。我有一个图像，我正在尝试CSS它，以便当我将鼠标悬停在图像上时，DIV会显示一些文本和部分透明的背景颜色。

我不知道该怎么做..

Answer 1

这是一个开始。 IE6不会这样做，除非你让父母成为锚（a）。

HTML

<div class="container">
    <img src="something.jpg" alt="" />
    <div>some text</div>
</div>

CSS

.container div {
    display: none;
    opacity: 0.7; /* look into cross browser transparency */
}

.container:hover div {
    display: block;
}

Answer 2

@alex，我想他希望文字出现在图像上，而不是在图像下面。有两种方法可以解决这个问题：

1. 将position:absolute添加到包含文字的div。
2. 使用背景图片而不是img标记。

我选择1，因为它在语义上更好，并且更适合在内容承载图像上使用img标签。

Answer 3

如果您想获得的效果与Dribbble页面上的效果类似，那么您无需在div上创建img。

图像的两个版本就足够了，一个是正常的，一个是去饱和的，并且光度增加（或类似的东西，给人以“透明度”的印象）。

现在您创建一个以图像为背景的div，在鼠标悬停时切换背景并添加文本。 在mouseout上，您还原更改。

编辑：当然，在实践中，您将动态分配图像名称（例如使用PHP），但这是另一个故事。您甚至可以使用GD库自动生成“透明”图像。

一个小例子：

<强> CSS：

.squareImg
    {
    display: block;
    width: 100px;
    height: 100px;
    background-image: url("100x100.jpg"); 
    }

.squareImgOver
    {
    display: block;
    width: 100px;
    height: 100px;
    background-image: url("100x100transp.jpg"); 
    }

<强> HTML

<div id="mydiv" class="squareImg" onmouseover="writeText();" 
    onmouseout="eraseText()"></div>

<强> JS

function writeText()
    {
    var d = document.getElementById("mydiv");
    d.className = "squareImgOver";
    d.innerHTML = "something here!";
    }

function eraseText()
    {
    var d = document.getElementById("mydiv");
    d.className = "squareImg";
    d.innerHTML = "";
    }
</script>

Answer 4

我建议使用jQuery，因为很容易说“鼠标悬停”会触发其他东西出现。