当鼠标悬停在图片上时，在图片上添加文本

Question

当鼠标悬停在图片上时，在图片上添加文本

javascriptphphtmlcssweb

3

我之前从事桌面开发，对于网页开发还比较新手，新的老板给了我一个项目。

我需要将公司标志周围的图像链接到我们其他的产品。虽然我认为我可以用这些标志来包围图片，但我想在标志上添加一些文本，以使其更加易懂。如果只是一个产品的标志而没有任何告诉用户它是什么的东西，那么我想会相当奇怪。

我有 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>

提前感谢任何有帮助的答案或指引，谢谢！

- SimonC

可能是 .container img:hover {} 和 .container img:hover:after {}？ - freewheeler

我猜那是CSS，对吗？请原谅我的无知，我完全没有创建网站的经验。 - SimonC

title属性不足以表达图像的含义？ - Vignesh

@Vignesh 不，公司标志周围应该有多张图片展示不同的产品和服务。我想保持简洁而易读的风格。我为Firefox用户提供了一个示例，但Chrome也是一样。边框会发光，但我还想添加文字。 - SimonC

3个回答

0

我认为你可以把

<title>Your text</title>

放在 <img> 标签内。

- IvanSorokin

0

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

祝好

- ChesuCR

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- freewheeler · Accepted Answer

仅使用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