用鼠标悬停在图像上的文本进行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. 在包含文本的div中添加position:absolute 。
2. 使用背景图像代替img标签。

我会选择1，因为从语义上来说更好，对于带有内容的图像使用img标签更好地实现了可访问性。

Answer 3

如果要获得的效果类似于“ Dribbble”页面上的效果，则无需在img上创建div 。

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

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

编辑：当然，在实践中，您将动态分配图像名称（例如，使用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，因为很容易说“ mouseover”会触发另一件事。