javascript函数mOver(obj)应用程序
javascript函数mOver(obj)应用程序
提问于 2013-11-13 18:13:15
嗨:我正在用wordpress做一个网站，我需要两段代码，这段代码一直让我很难过。我知道很容易，但我做不到。
- 我需要做的是，当鼠标超过(或进入)任何三个图像，图像改变(幻灯片)为另一个图像与描述性文本。如何将图像包含到此示例代码中，以及链接下面的图像中？
鼠标过更改内容http://www.nrgtechnologies.com.au/moreimages/plain-2.jpg
- 也非常相似的效果与水平菜单之间的3或4之间的滑动过渡菜单元素鼠标上方，如每图像链接波纹管。
鼠标滑过菜单和内容：http://www.nrgtechnologies.com.au/moreimages/plain-1.jpg
谢谢你的帮助
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-11-13 20:48:28
请看下面的脚本：
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<style type="text/css">
.slide {
background-image: url(plain-2.jpg);
width: 295px;
height: 220px;
-webkit-transition: background-position .5s ease-in-out;
}
.slide-1 {
background-position: -30px -215px;
-webkit-transition: background-position .5s ease-in-out;
}
.slide-2 {
background-position: -354px -215px;
-webkit-transition: background-position .5s ease-in-out;
}
.slide-3 {
background-position: -675px -215px;
-webkit-transition: background-position .5s ease-in-out;
}
.moz-over {
background-color: #ccc;
}
</style>
</head>
<body>
<div id="images" class="slide slide-1">
</div>
<span onmouseover="mozOver(this)" onmouseout="mozOut(this)">slide-1</span>
<span onmouseover="mozOver(this)" onmouseout="mozOut(this)">slide-2</span>
<span onmouseover="mozOver(this)" onmouseout="mozOut(this)">slide-3</span>
<script type="text/javascript">
var mozOver = function(target) {
target.className = "moz-over";
var images = document.getElementById("images");
images.className = "slide " + target.innerHTML;
};
var mozOut = function(target) {
target.className = "";
};
</script>
</body>
</html>我不确定你是否想要。我的逻辑和上面一样。
Stack Overflow用户
发布于 2013-11-13 18:35:27
向id添加一个div属性，并删除javascript处理程序：
<div id="description"></div>
然后将处理程序添加到图像中：
<img onmouseover="mOver(this)" onmouseout="mOut(this)" ... />
然后在您的函数中使用如下所示：
function mOver(obj)
{
var description = document.getElementsById("description");
description.innerHTML="Thank You";
}
function mOut(obj)
{
var description = document.getElementsById("description");
description.innerHTML="Mouse Over Me";
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19968243
复制相关文章
点击加载更多
相似问题
用于批量传输的WinUSB事件
为什么WinUsb_WritePipe用异步winusb返回错误997？
.NET中的异步传输控制协议通信
WinUSB安装
取消控制台按键中的异步方法
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
