<li id="nz">
 <a href="newshot.php" title="【72小时疯狂抢定惠】"><img src="../image/n3.jpg" id="ew" style="height:124px; width:220px;">
<div id="news_right_zw"><span class="STYLE26">【72小时疯狂抢定惠】</span><br><span class="STYLE27">婚纱照尊享“三大优惠 五次惊喜”三大优惠:优惠1 婚...</span><br> <span class="STYLE28">Activities Picture [2012-02-05]</span></div>
<div id="news_right_zn"><span class="STYLE29" id="nz1">FEB</span><br><span class="STYLE30" id="nz2"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 5</span></div></a>
</li>
<li id="wz">
<a href="newshot.php" title="最新鲜的原片 拉斐特+棚拍晒幸福"><img src="../image/n4.jpg" id="we" style="height:124px; width:220px;">
<div id="news_right_zw"><span class="STYLE26">最新鲜的原片 拉斐特+棚拍晒幸福</span><br><span class="STYLE27">提到法国的普罗旺斯地区,可能在现今摩登浪漫的中国人的脑海里第...</span><br>
<span class="STYLE28">Activities Picture [2012-12-17]</span></div>
<div id="news_right_zn"><span class="STYLE29" id="wz1">DEC</span><br><span class="STYLE30" id="wz2"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 17</span></div></a>
</li><script language="javascript">
   document.getElementById('nz').onmouseover=function(){
          document.getElementById('nz1').style.color='#efe800';
  document.getElementById('nz2').style.color='#efe800';
  document.getElementById('ew').style.border='#fce607 4px solid';
   }
   document.getElementById('nz').onmouseout=function(){
          document.getElementById('nz1').style.color='';
  document.getElementById('nz2').style.color='';
  document.getElementById('ew').style.border='#990f26 4px solid';
   }
   document.getElementById('wz').onmouseover=function(){
          document.getElementById('wz1').style.color='#efe800';
  document.getElementById('wz2').style.color='#efe800';
  document.getElementById('we').style.border='#fce607 4px solid';
   }
   document.getElementById('wz').onmouseout=function(){
          document.getElementById('wz1').style.color='';
  document.getElementById('wz2').style.color='';
  document.getElementById('we').style.border='#990f26 4px solid';
   }
</script>
这样是可以实现文字和图片边框根据鼠标的移上和移下改变颜色的,现在是要从数据库里面查询数据得到来做循环显示,那么应该怎么该javascript和《li》的id啊?谢谢

解决方案 »

  1.   

    楼主我提个建议,
    你问问题,如果很明确需求,那就用把简化的代码放上来,
    比如
    <li id="li1">a</li>
    这样,别人看起来清楚。你这样一大段实际的代码出来,别人有几个有耐心看完
      

  2.   

    <li id="nz"><img src="../image/n3.jpg" id="ew""><span id="nz1">FEB啊啊啊啊啊</span><span id="nz2">5轻轻轻轻轻轻轻轻</span></li><li id="wz"><img src="../image/n3.jpg" id="we""><span id="wz1">FEB啊啊啊啊啊</span><span id="wz2">5轻轻轻轻轻轻轻轻</span></li>
    <script language="javascript">
      document.getElementById('nz').onmouseover=function(){
      document.getElementById('nz1').style.color='#efe800';
    document.getElementById('nz2').style.color='#efe800';
    document.getElementById('ew').style.border='#fce607 4px solid';
      }
      document.getElementById('nz').onmouseout=function(){
      document.getElementById('nz1').style.color='';
    document.getElementById('nz2').style.color='';
    document.getElementById('ew').style.border='#990f26 4px solid';
      }
      document.getElementById('wz').onmouseover=function(){
      document.getElementById('wz1').style.color='#efe800';
    document.getElementById('wz2').style.color='#efe800';
    document.getElementById('we').style.border='#fce607 4px solid';
      }
      document.getElementById('wz').onmouseout=function(){
      document.getElementById('wz1').style.color='';
    document.getElementById('wz2').style.color='';
    document.getElementById('we').style.border='#990f26 4px solid';
      }这样看懂没有?麻烦各位啦!谢谢!
      

  3.   

    那么应该怎么该javascript和《li》的id啊?这句话怎么理解? 问题没有描述清楚。
      

  4.   

    楼主原来是想对所有li增加一种鼠标移上去的样式对吧,这个很简单,先定义好这个样式,然后对所有li绑定增定增加class事件就行了,为了简洁我用jquery 写
    这里给你一个完整的全HTML
    <!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>test</title>
    <style type="text/css" >
    #ul1 li{ color:Blue;}
    #ul1 li.over{ color:red;}
    </style>
    <script type="text/javascript" src="jquery-1.4.1.js" ></script>
    </head>
    <body>
    <ul id="ul1">
    <li>a</li>
    <li>b</li>
    </ul>
    <script type="text/javascript" >
        $("#ul1 li").each(
            function() { 
            
                $(this).mouseover(function(){
                $(this).addClass("over");
                });
                    $(this).mouseout(function(){
                $(this).removeClass("over");
                });
             }
        );
      
    </script>
    </body>
    </html>
      

  5.   

    <li onmouseover="in(this)" onmouseout="out(this)"></li>每一对<li>标签都这样写,所以你可以根据数据库中的记录条数循环<script language="javascript">
    function in(event){
    event.style.color="#efe800";
    }
    function out(event){
    event.style.color="";
    }
    </script>
      

  6.   

    就是这样的当鼠标移到
      <li id="nz">上就会改变图片<img id="ew">的边框颜色和文字""><span id="nz1">FEB啊啊啊啊啊</span><span id="nz2">5轻轻轻轻轻轻轻轻</span>的颜色,
      <li id="wz">上就会改变图片<img id="we">的边框颜色和文字""><span id="wz1">FEB啊啊啊啊啊</span><span id="wz2">5轻轻轻轻轻轻轻轻</span>的颜色,用的是javascript来实现的,现在是要从数据库里查出来循环显示,那么我应该怎么修改我的代码?谢谢
      

  7.   

    楼主没明白我写给你的东西吗,
    这样你可以省非常多的html 和js,
    而且样式还可以用css 控制,非常方便
      

  8.   

    我要的是循环这个<li>,从数据库里面查出数据出来做<li>的循环,然后来改变图片边框和文字的颜色,这样说你们还有没有什么不清楚的吗?
      

  9.   

    <html>
    <head><title>鼠标移到行上变色</title></head>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script>
    $(function(){
    $("li").mouseover(function(){
    $(this).css('color','red');
    });
    $("li").mouseout(function(){
    $(this).css('color','black');
    });
    });
    </script>
    <body>
    <ul>
    <li>鼠标移到行上变色</li>
    <li>鼠标移到行上变色</li>
    <li>鼠标移到行上变色</li>
    <li>鼠标移到行上变色</li>
    <li>鼠标移到行上变色</li>
    <li>鼠标移到行上变色</li>
    <li>鼠标移到行上变色</li>
    <li>鼠标移到行上变色</li>
    </ul>
    </body>
    </html>
    符合你的要求,jquery写的,不知道适不适合你。
      

  10.   

    那你应该发到php版块去。你的php代码如何写的? 
      

  11.   

    好像没有人理解我的意思啊,我这样解释可能你们会懂!我在没有用数据库的时候是这样写的是可以实现,
    <li id="nz"><img src="../image/n3.jpg" id="ew""><span id="nz1">FEB啊啊啊啊啊</span><span id="nz2">5轻轻轻轻轻轻轻轻</span></li>
    <li id="wz"><img src="../image/n3.jpg" id="we""><span id="wz1">FEB啊啊啊啊啊</span><span id="wz2">5轻轻轻轻轻轻轻轻</span></li>
    <script language="javascript">
      document.getElementById('nz').onmouseover=function(){
      document.getElementById('nz1').style.color='#efe800';
    document.getElementById('nz2').style.color='#efe800';
    document.getElementById('ew').style.border='#fce607 4px solid';
      }
      document.getElementById('nz').onmouseout=function(){
      document.getElementById('nz1').style.color='';
    document.getElementById('nz2').style.color='';
    document.getElementById('ew').style.border='#990f26 4px solid';
      }
      document.getElementById('wz').onmouseover=function(){
      document.getElementById('wz1').style.color='#efe800';
    document.getElementById('wz2').style.color='#efe800';
    document.getElementById('we').style.border='#fce607 4px solid';
      }
      document.getElementById('wz').onmouseout=function(){
      document.getElementById('wz1').style.color='';
    document.getElementById('wz2').style.color='';
    document.getElementById('we').style.border='#990f26 4px solid';
      }
    当鼠标移到<li>,就改变<li>里面的图片边框和文字的颜色,离开又回到原来的颜色,就像上面这样写是没有问题的。可是现在我是要从数据库里面查出数据来做循环,比如:
    <?
     “这里是查询语句”
    for($i=0;$i<$arrow;$i++){
      ”这里是得出值“
    ?>
    <li id="nz"><img src="../image/<?=$photo;?>" id="ew""><span id="nz1"><?=$word;?></span><span id="nz2"><?=$word1;?></span></li>
    <?
    }
    ?>
    那么现在我应该怎么改代码啊?我知道javascript也要改,只是不知道怎么改,你们帮帮我吧!
      

  12.   

    我再用你的例子转一下,如果再不明白,我就遁了,
    <!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>test</title>
    <style type="text/css" >
    #ul1 li{ color:Blue;}
    #ul1 li img{ border:#990f26 4px solid;}
    #ul1 li.over img{
    border:#fce607 4px solid;
    }
    #ul1 li.over span{
    color:#efe800;
    }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" ></script>
    </head>
    <body>
    <ul id="ul1">
    <li id="nz"><img src="../image/n3.jpg" id="ew""><span id="nz1">FEB啊啊啊啊啊</span><span id="nz2">5轻轻轻轻轻轻轻轻</span></li><li id="wz"><img src="../image/n3.jpg" id="we""><span id="wz1">FEB啊啊啊啊啊</span><span id="wz2">5轻轻轻轻轻轻轻轻</span></li>
    </ul>
    <script type="text/javascript" >
        $("#ul1 li").each(
            function() {            $(this).mouseover(function() {
                    $(this).addClass("over");
                });
                $(this).mouseout(function() {
                    $(this).removeClass("over");
                });
            }
        );
      
    </script>
    </body>
    </html>
      

  13.   

    用我的例子,把你原来页面里那一大段  document.getElementById('nz').onmouseover ..全部去掉,把 asp li的全部里的id,nz wz nz1,nz2等等全部去掉
      

  14.   

    for($i=0;$i<$arrow;$i++){
         echo <<<html
    <li id="nz$i"><img src="../image/$photo" id="ew$i"><span id="nz1$i">$word</span><span id="nz2$i">$word1</span></li>
    html;
    }
    js代码:
     //假设你的ul的id为test
    var lis= document.getElementById('test').getElementsByTagName("li");
    for(var i=0,len=lis.length;i<len;i++){
      document.getElementById('nz'+i).onmouseover=function(){
         document.getElementById('nz1'+i).style.color='#efe800';
         document.getElementById('nz2'+i).style.color='#efe800';
         document.getElementById('ew'+i).style.border='#fce607 4px solid';
      }
      document.getElementById('nz'+i).onmouseout=function(){
         document.getElementById('nz1'+i).style.color='';
         document.getElementById('nz2'+i).style.color='';
         document.getElementById('ew'+i).style.border='#990f26 4px solid';
      }
    }
      

  15.   

    这个用了一个<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" ></script>
    </和我原来的代码有冲突,可能是js导致的,我快崩溃啦!
      

  16.   

    for($i=0;$i<$arrow;$i++){
         echo <<<html
    <li id="nz$i"><img src="../image/$photo" id="ew$i"><span id="nz1$i">$word</span><span id="nz2$i">$word1</span></li>
    html;
    }里面的$i我改成<?=$nide;?>行吗?因为都是可以得到不同的值,但是运行还是不行啊
      

  17.   

    <html>
    <head>
    <title>鼠标移到行上变色</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script>
    $(function(){
        $("li").mouseover(function(){
            $(this).find('span').css('color','#efe800'); //鼠标移到这行上改变字体颜色
            $(this).find('img').css('border','4px solid #efe800');
        }).mouseout(function(){
            $(this).find('span').css('color','black'); //鼠标离开这行恢复字体颜色
            $(this).find('img').css('border','4px solid black');
        });
    });
    </script>
    <style>
    li{
    margin:10px;
    padding:0;
    }
    </style>
    <body>
        <ul>
         <?php
         $arrow = 10; //举个例子,比如从数据库里搜索出十条记录
         $word = "&nbsp;鼠标移到行上变色";
         $word1 = "&nbsp;鼠标离开恢复颜色";
         for($i=0;$i<$arrow;$i++)
         {?>    
         <li><img alt="图片" border="5" /><span><?=$word;?></span><span id="nz2"><?=$word1;?></span></li>
         <?php }?>
        </ul>
    </body>
    </html>
    这样能够理解不?
      

  18.   

    非常谢谢你们!用菲菲的就会和原来的代码里有一个图片切换有冲突,用乔丹的就没有变色,我还是把我的代码再简单的谢出来你们看哈!
    $result="select * from news where ntype='1' order by nid desc limit $offset,$Page_size";
    $queryr=$obj->exec($result);
    $i == 0;
    while ($row=mysql_fetch_array($queryr)) {
    $nide=$row['nid'];
    $ntitlee=$row['ntitle'];
    $nworde=$row['nword'];
    $nphotoe=$row['nphoto'];
    $ndatee=$row['ndate'];
    $ntypee=$row['ntype'];
    ?>
    <li id="nz"><img src="../image/<?=$photo;?>" id="ew""><span id="nz1"><?=$word;?></span><span id="nz2"><?=$word1;?></span></li>
    <?
    }
    ?>
    <script language="javascript">
      document.getElementById('nz').onmouseover=function(){
      document.getElementById('nz1').style.color='#efe800';
    document.getElementById('nz2').style.color='#efe800';
    document.getElementById('ew').style.border='#fce607 4px solid';
      }
      document.getElementById('nz').onmouseout=function(){
      document.getElementById('nz1').style.color='';
    document.getElementById('nz2').style.color='';
    document.getElementById('ew').style.border='#990f26 4px solid';
      }
      document.getElementById('wz').onmouseover=function(){
      document.getElementById('wz1').style.color='#efe800';
    document.getElementById('wz2').style.color='#efe800';
    document.getElementById('we').style.border='#fce607 4px solid';
      }
      document.getElementById('wz').onmouseout=function(){
      document.getElementById('wz1').style.color='';
    document.getElementById('wz2').style.color='';
    document.getElementById('we').style.border='#990f26 4px solid';
      }
    就是这样子的啦?我想你们应该知道我的意思啦吧?
      

  19.   

    在你的代码中并没有看到 wz wz1 wz2 we等id啊。不知道你的代码怎么设计的?
      

  20.   

    wz wz1 wz2 we等id 这个是没有用数据库的时候,就写多少是多少的啊,现在是用啦数据库是要循环的嘛,所以就没有wz wz1 wz2 we等id啦,如果要有这个的话那要循环两行,那不对啊!这样你看懂吗?
      

  21.   

    你就说用我的那种方法生成HTML代码是你要的吗? js没生效先不管。先把你要的HTML代码生成了再说。