gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-31 21:07:16 24 4
gpt4 key购买 nike

我对 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com