html中关于鼠标停留在表格上表格的颜色发生改变的问题（谢谢）

代码如下：<html><head><title></title></head><body><tableborder="1"align="center"width="50%... 代码如下：
<html>
<head>
<title></title>
</head>
<body>
<table border="1" align="center" width="50%" cellspacing="0" cellpadding="3" bordercolor="#87CEFA" rules="none">
<tr align="center">
<td style="width:182px;height:102px;" onmouseover="this.style.border='1px solid #1E90FF'"onmouseout="this.style.border='none'">
<b><big/><big/><big/>你好</b>
</td>
<td style="width:182px;height:102px;" onmouseover="this.style.border='1px solid #1E90FF'"onmouseout="this.style.border='none'">
<b><big/><big/><big/>你好</b>
</td>
<td style="width:182px;height:102px;" onmouseover="this.style.border='1px solid #1E90FF'"onmouseout="this.style.border='none'">
<b><big/><big/><big/>你好</b>
</td>
<td style="width:182px;height:102px;" onmouseover="this.style.border='1px solid #1E90FF'"onmouseout="this.style.border='none'">
<b><big/><big/><big/>你好</b>
</td>
</tr>
</table>
</body>
</html>

为什么我把鼠标放在表格上来回切换而那些表格会小小的波动呢？怎么样才能实现让它静止不动呢？就像要实现百度的那个推荐导航（如下截图）一样的效果。还有就是这窜代码onmouseover="this.style.border='1px solid #1E90FF'"onmouseout="this.style.border='none'"可不可以用css控制？谢谢。展开

 我来答

3个回答

#合辑# 面试问优缺点怎么回答最加分？

言言言小鱼

2015-01-06 · 小小的鱼儿小小的我，我就是言小鱼。

言言言小鱼

采纳数：1335 获赞数：7608

向TA提问私信TA

关注

展开全部

<html>
<meta charset="utf-8">
  <head>
    <title></title>
    <style type="text/css">
		body{
		
		}
		span{
				width:182px;
				height:102px;
				display:block;
				float:left;				
				border:1px solid #87cefa;
				border-right-color:#ffffff;
				line-height:102px;
				text-align:center;	
			}
		span.last{
				border-right-color:#87cefa;
			}
		span:hover{
				border-color:#1e90ff;
			}
		span:hover + span{
				border-left-color:#ffffff;
			}
	</style>
  </head>
  <body>
       <span>你好</span>
       <span>你好</span>
       <span>你好</span>
       <span class="last">你好</span>
  </body>
</html>

你的html头部写的不太规范，会容易出错的，最好用个dw编辑器，可以自动生成头部，还有现在很少把代码直接写在html标签里了。

追问

谢谢你的回答和意见，其实，我是初学者，在自己琢磨这些问题的。

追答

这个东西就得多写，买本基础的html+css的书多看看，多写写，一个月就可以把基本的东西掌握了。

已赞过 已踩过<

评论收起

武汉市江夏区仪仪网络服..

广告2024-12-21

网站制作?荆州快速建站，售后无忧，网站设计+制作+推广，一条龙服务专业公司。网站建设实力派!欢迎咨询

qianhu.wejianzhan.com

小桔子爱吃桔子
2015-01-06 · 知道合伙人教育行家

小桔子爱吃桔子
知道合伙人教育行家

采纳数：142 获赞数：462

2014年6月毕业于杭州电子科技大学，在一家互联网公司工作至今，爱学习，爱数学更爱英语。

向TA提问私信TA

关注

展开全部

因为你鼠标移上去会有border出现，那么宽高都会增加2px啊，所以鼠标移动上去会有有小小的波动，把移走效果改成onmouseout="this.style.border='1px solid #fff'"，边框颜色与背景色相同就好了，就相当于没有边框，也就不会有波动了
一般就那样写，想简单点就用jquery写几句

追问

非常感谢，解决了。还有就是这窜代码onmouseover="this.style.border='1px solid #1E90FF'"onmouseout="this.style.border='none'"可不可以用css控制？

本回答被提问者采纳

已赞过 已踩过<

评论收起

Noah_sp
推荐于2017-12-15 · TA获得超过191个赞

知道小有建树答主

回答量：191

采纳率：100%

帮助的人：141万

我也去答题访问个人页

关注

展开全部

复制粘贴，妥妥的

<html>
  <head>
    <title></title>
<style type="text/css">
td:hover {background-color:#FF00FF}
</style>
  </head>
  <body>
       <table border="1" align="center" width="50%" cellspacing="0" cellpadding="3" bordercolor="#87CEFA" rules="none">
          <tr align="center">
            <td style="width:182px;height:102px;" >
            <b><big/><big/><big/>你好</b>
            </td> 
            <td style="width:182px;height:102px;" >
            <b><big/><big/><big/>你好</b>
            </td>
            <td style="width:182px;height:102px;" >
            <b><big/><big/><big/>你好</b>
            </td> 
            <td style="width:182px;height:102px;" >
            <b><big/><big/><big/>你好</b>
            </td>
          </tr>
       </table>
  </body>
</html>

追问

谢谢你的回答，不过我想实现的是td边框颜色的改变哦，不是背景颜色。

追答

如果你非要用table的话就这么写，不加div的话后三个的border-left或border-right会没效果，如果不是非用table可以向那位朋友一样用span来写

<html>
  <head>
    <title></title>
<style type="text/css">
div{border:2px solid #FF00FF;width:182px;height:102px;line-height:102px;}
div:hover {border-color:#FF9224;}
</style>
  </head>
  <body>
       <table border="0" align="center" cellspacing="0" cellpadding="0" rules="none">
          <tr align="center">
            <td>
<div>
            <b><big/><big/><big/>你好</b>
</div>
            </td> 
            <td>
<div>
            <b><big/><big/><big/>你好</b>
</div>
            </td>
            <td>
<div>
            <b><big/><big/><big/>你好</b>
</div>
            </td> 
            <td>
<div>
            <b><big/><big/><big/>你好</b>
</div>
            </td>
          </tr>
       </table>
  </body>
</html>