javascript - 鼠标悬停时向图像添加文本

标签 javascript php html css web

我对 Web 开发还是个新手(来自桌面开发),我的新老板已经给了我一个元素。

我必须用链接到我们其他产品的图像围绕我们公司的 Logo 。 虽然我认为我可以用 Logo 围绕图像,但我想在 Logo 中添加一些文本,以减少混淆。我可以想象它会非常……奇怪,因为找不到更好的词,如果它只是一个产品的 Logo 而没有告诉用户它是什么。

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

提前为任何和所有有用的答案或正确方向的指示欢呼!

最佳答案

简单地在 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

关于javascript - 鼠标悬停时向图像添加文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30393033/

相关文章:

php - Mysql 将表列从一个数据库更新到另一个数据库

javascript - Jquery .next() 未按预期工作

html - Bootstrap 复选框未在表单中对齐

javascript - 鼠标悬停/鼠标左移时的 JS slider

javascript - 通过具有 CSS 样式的 JS 动态生成 HTML 复选框

php - 检查相同的数组值

PHP 在 SQL 语句中转换日期时间

javascript - 如何获取当前悬停的 anchor 的标题属性?

javascript - 意外使用 'self' no-restricted-globals React

javascript - 在 contentEditable ="true"DIV 中修改 innerHTML 导致失去焦点或错误选择