鼠标悬停时向图像添加文本答案

【问题标题】：Add text to image when mouse over鼠标悬停时向图像添加文本
【发布时间】：2015-05-22 17:49:43
【问题描述】：

我还是网络开发新手（来自桌面开发），我的新老板已经给了我一个项目。

我必须用链接到我们其他产品的图片来包围我们公司的徽标。虽然我认为我可以用徽标围绕图像，但我想在徽标中添加一些文字，以减少混乱。如果它只是一个产品的标志而没有告诉用户它是什么的话，我可以想象它会很……奇怪，因为没有更好的词。

我有 PHP 的基本知识（我知道函数、构造函数、类、变量等是如何工作的，但没有真正的经验），但我不知道这是否对我有任何帮助。

这是我想做的一个例子（伪）：

func onMouseOver(object m_obj) 
    m_obj.showCaption();
    m_obj.border = new Border(Effects.Glow, Colors.Blue);
end

我没有更好的方法来展示它，如果它看起来有些混乱，很抱歉。

如果您是 Firefox 用户，请打开一个新标签并将鼠标悬停在其中一张图片上，我正在尝试实现类似的效果。

代码：

  <head>
    <title>NetWork Team Vorschau</title>
    <link rel="stylesheet" type="text/css" href="index_style.css" >
  </head>

  <body>
    <div class="container" >
      <input class="sites_overview" type="image" src="http://www.sites-login.de/images/logo_sites.gif" value="Übersicht: Sites" /> <!-- I want this to show text when hovered over -->
      <img class="nwt_img" src="http://www.nwt.de/images/networkteam.png" />
    </div>
  </body>

</html>

提前为任何和所有有用的答案或正确方向的指示干杯！

【问题讨论】：

可能是.container img:hover {} 和.container img:hover:after {} ?
我猜那是 CSS，对吧？请原谅我的无知，我在创建网站方面完全没有经验。
title 属性不足以说明图像的含义？
@Vignesh 不，公司徽标周围应该有多个图像，具有不同的产品和服务。我想让它保持时尚，但可读。我为 Firefox 用户举了一个例子，但 Chrome 也是如此。边框亮了，但我还想添加文字。

标签： javascript php html css web

【解决方案1】：

仅在 CSS 中：

.one:hover::after {
content:"Text when hovered";
position:absolute;
left:0;
}

<div class="container">
    <div class="one">
        <input class="sites_overview" type="image" src="http://www.sites-login.de/images/logo_sites.gif" value="Übersicht: Sites" />
    </div>
</div>

JDFiddle

编辑：+ 一个可能有发光效果

JSFiddle

【讨论】：

干杯。我会试一试，然后告诉你。
不太好用。当我将鼠标悬停在图片上时，整个网页开始快速移动。
我向您展示了基本代码作为指导，它肯定会起作用。你需要做更多的 CSS 来做你想做的事，并防止这些元素对你的布局造成伤害！

【解决方案2】：

我觉得你可以放

<title>Your text</title>

在<img> 标签内。

【讨论】：

【解决方案3】：

您需要使用 JavaScript 方法 (onmouseover) 或 jQuery 方法 (.mouseover())。 jQuery 是最常用的 JavaScript 框架，查看官方页面。 JavaScript 在客户端，在浏览器中运行。

问候

【讨论】：