0

嗨：我正在用 wordpress 做一个网站，我需要两段代码，这让我很难过。我知道这很容易，但我无法让它发挥作用。

  • 我需要这样做，当鼠标悬停（或进入）三个图像中的任何一个时，图像会更改（滑动）到另一个带有描述性文本的图像。如何将图像包含在此示例代码中，并按照下面链接上的图像？

    <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>

<script>
function mOver(obj)
{
obj.innerHTML="Thank You"
}

function mOut(obj)
{
obj.innerHTML="Mouse Over Me"
}
</script>

鼠标悬停更改内容http://www.nrgtechnologies.com.au/moreimages/plain-2.jpg

  • 水平菜单的效果也非常相似，鼠标悬停时在 3 或 4 个菜单元素之间滑动过渡，如下面链接中的图像所示。

鼠标悬停在滑动菜单和内容上：http ://www.nrgtechnologies.com.au/moreimages/plain-1.jpg

谢谢您的帮助

4

2 回答 2

0

请看下面的脚本：

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

我不确定你是否想要。我的逻辑就像上面一样。

于 2013-11-14T04:48:28.860 回答
0

向您添加一个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";
}
于 2013-11-14T02:35:27.073 回答