当前位置:编程学习 > JS >>

js中的onmouseover事件?

在一个DIV里,已经放入了内容,然后添加js代码,实现鼠标经过显示不同内容的功能。

<script>
 function txt(obj, con) {
  var oDiv = document.getElementById(obj);
  if (con == 'show') { oDiv.style.display = 'block';}
  if (con == 'hide') { oDiv.style.display = 'none';}
 }
</script>
<p><a href="#" onmouseover="txt('aa', 'show');" onmouseout="txt('aa', 'hide');">日志 </a> / <a href="#" onmouseover="txt('bb', 'show');" onmouseout="txt('bb', 'hide');">音乐</a></p>
<div style="display:show;" id="aa"> asdfasdf
</div>

<div style="display:none;" id="bb">

asdfasdf
</div>

 

刚打开页面的时候,显示id=aa的内容,鼠标移动到音乐的时候,显示id=bb的内容。当鼠标既不再日志,也不再音乐的时候,显示id=aa的内容,请问怎么修改?

整了半天,头脑有点乱,如果看不懂,请提出来。非常感谢。

追问:非常感谢,问题已经完美解决,看来是要开始学东西了,自己会的太少了,等会采纳你的答案,十分感谢。
答案:<script>
 function txt(obj1, obj2) {
  var oDiv1 = document.getElementById(obj1);
  var oDiv2 = document.getElementById(obj2);
 oDiv1.style.display = 'block';
 oDiv.2style.display = 'none';
 }
</script>
<p><a href=><div style="display:show;" id="aa"> asdfasdf
</div>

<div style="display:none;" id="bb">

asdfasdf
</div>

 

你说这样行不行?你要当鼠标既不再日志,也不再音乐的时候,显示id=aa的内容。那么 你给音乐以及日志都添加一个鼠标移出事件onMouseOut那么就可以对鼠标既不再日志,也不再音乐时进行判断了!

注意我黑色部分的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script>

  
        function txt(nameDiv) {

            var div1 = document.getElementById("aa");
            var div2 = document.getElementById("bb");

         var divg = document.getElementById(nameDiv);

         if (divg.style.display == "none") {

             divg.style.display = "block";
             if (nameDiv == "aa") {
                 div2.style.display = "none";
             }
             else {
                 div1.style.display = "none";
             }
         }
         else {
             divg.style.display = "none";
         }


     

         //如果两个都隐藏了,强制显示第一个
         if(div1.style.display=="none"&& div2.style.display=="none")
         {
            div1.style.display="block";
         }
        }

  
    </script>
</head>
<body>
    <p>
        <a href=>        </a>/ <a href=>    <div style="display:block;" id="aa">
        aa
    </div>
    <div style="display:none;" id="bb">
        bb
    </div>
</body>
</html>

上一个:JS 时间字符串转换问题
下一个:JS向JSP传递数据

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,