Javascript 鼠标悬停在图像上时向图像添加文本_Javascript_Php_Html_Css_Web

Javascript 鼠标悬停在图像上时向图像添加文本

javascript php html css web

Javascript 鼠标悬停在图像上时向图像添加文本,javascript,php,html,css,web,Javascript,Php,Html,Css,Web,我对网络开发还是新手（来自桌面开发），我的新老板已经给了我一个项目我必须用链接到我们其他产品的图像环绕我们公司的徽标。虽然我认为我可以用徽标环绕图像，但我想在徽标中添加一些文字，以减少混淆。我可以想象它是相当。。。奇怪的是，如果它只是一个产品的标志，而没有告诉用户它是什么，那么就没有更好的词了我有PHP的基本知识（我知道函数、构造函数、类、变量等是如何工作的，但在这方面没有实际经验），但我不知道这是否对我有任何帮助下面是我想做的一个示例（伪）：我没有更好的方法来演示它，如果它看起来有点

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

我必须用链接到我们其他产品的图像环绕我们公司的徽标。虽然我认为我可以用徽标环绕图像，但我想在徽标中添加一些文字，以减少混淆。我可以想象它是相当。。。奇怪的是，如果它只是一个产品的标志，而没有告诉用户它是什么，那么就没有更好的词了

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

下面是我想做的一个示例（伪）：

我没有更好的方法来演示它，如果它看起来有点混乱，那么很抱歉

如果你是Firefox用户，打开一个新标签，将鼠标悬停在其中一个图像上，我正试图实现类似的效果

守则：


网络团队Vorschau

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

仅在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>

.one:hover:：after{
内容：“悬停时的文本”；
位置：绝对位置；
左：0；
}

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

我想你可以

您的文本

在

标记内部。

您需要使用JavaScript方法（）或jQuery方法（）。jQuery是最常用的JavaScript框架，请查看官方页面。JavaScript在客户端和浏览器中运行

关于

可能

。容器img:hover{}

和

。容器img:hover:after{}

？我猜这就是CSS，对吗？你必须原谅我的无知，我在创建网站方面绝对没有经验。标题属性不足以说明图像的含义？@Vignesh不，应该有多个图像围绕着公司徽标，带有不同的产品和服务。我想保持它光滑，但可读性。我举了一个Firefox用户的例子，但Chrome也是如此。边框亮了，但我还想添加文本。干杯。我试试看，让你知道。不太管用。当我在图片上方盘旋时，整个网页开始快速移动。我向您展示了基本代码，作为您的指南，它肯定会起作用。你需要做更多的CSS来做你想做的事情，并防止这些元素对你的布局造成损害！

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

.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>