javascript函数mOver(obj)应用程序
javascript函数mOver(obj)应用程序
提问于 2013-11-14 02: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-14 04: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-14 02: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
复制相关文章
相似问题
腾讯云开发者
