鼠标悬停切换ajax值

时间:2014-07-08 19:29:38

标签: javascript ajax mouseover

当我的 鼠标悬停时,我希望将按钮的值转换为img的 src >

<div style="float:left;">
<button value="dragon.jpg">Dragon</button>
<button value="phoenix.jpg">Phoenix</button>
</div>
<div style="float:left;"><img src="dragon.jpg"></div>

我该怎么做?。

1 个答案:

答案 0 :(得分:0)

你可以试试这个javascript的mouseover事件: -

    <body onload="load()">
    <div style="float:left;">
        <button class="hover-btn" value="dragon.jpg">Dragon</button>
        <button class="hover-btn" value="phoenix.jpg">Phoenix</button>
    </div>
    <div style="float:left;">
    <img id="imgChange" src="dragon.jpg" />
    </div>
    <script>
        function load(){
            var btns = document.getElementsByClassName("hover-btn");
            for(var i =0; i< btns.length; i++){
                btns[i].addEventListener("mouseover", function( event ) {   
                    document.getElementById("imgChange").src = event.target.value; 
                }, false);
            }
        }
    </script>
</body>