<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"> 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"> 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啊?谢谢
<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"> 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"> 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啊?谢谢
你问问题,如果很明确需求,那就用把简化的代码放上来,
比如
<li id="li1">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';
}这样看懂没有?麻烦各位啦!谢谢!
这里给你一个完整的全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>
function in(event){
event.style.color="#efe800";
}
function out(event){
event.style.color="";
}
</script>
<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来实现的,现在是要从数据库里查出来循环显示,那么我应该怎么修改我的代码?谢谢
这样你可以省非常多的html 和js,
而且样式还可以用css 控制,非常方便
<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写的,不知道适不适合你。
<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也要改,只是不知道怎么改,你们帮帮我吧!
<!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>
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';
}
}
</和我原来的代码有冲突,可能是js导致的,我快崩溃啦!
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;?>行吗?因为都是可以得到不同的值,但是运行还是不行啊
<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 = " 鼠标移到行上变色";
$word1 = " 鼠标离开恢复颜色";
for($i=0;$i<$arrow;$i++)
{?>
<li><img alt="图片" border="5" /><span><?=$word;?></span><span id="nz2"><?=$word1;?></span></li>
<?php }?>
</ul>
</body>
</html>
这样能够理解不?
$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';
}
就是这样子的啦?我想你们应该知道我的意思啦吧?