导航:首页 > 万维百科 > 网页设计鼠标经过文字变色

网页设计鼠标经过文字变色

发布时间:2020-11-15 10:04:09

1、网页制作 当鼠标经过文字后字体会变大!在哪里写代码代码是什么!!

把要做特效的内容放到一个<a></a>标签里面,然后给它设置一个css样式:
a:hover{font-size:你想要的字体大小;}。
如果不想出现链接效果的话,可以把内容放到<span></span>标签,然后用span:hover{font-size:你想要的大小;}也行。这两种方法在IE7,8和Firefox上都可行。

如果要兼容杯具或者说餐具的IE6的话,只能用以下方法。
<a href="#" id="linkHover">你想出现效果的内容</a>
为了使得这个超链接表现得像普通文本内容,给这个超链接建立个样式如下:
a {color:Black; text-decoration:none;cursor:default;}
a.hover, a:hover { font-size:你想要的字体大小; }

之后再用一段JS给它动态增加css样式:
<script type="text/javascript">
<!--[if IE 6]>
document.getElementById('linkHover').onmouseover = function() {
this.className = "hover";
};
document.getElementById('linkHover').onmouseout = function() {
this.className = "";
}
<![endif]-->
</script>

至此,无论是Firefox,IE7,8还是杯具的IE6都能够得到想要的效果了。

2、网页制作代码,鼠标放在导航栏上变色那种,

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<div style="width:100px; height:30px; border:1px solid #cecece; line-height:30px; text-align:center;" onmouseover="this.style.background='#ff0000'" onmouseout="this.style.background=''">学院简介</div>

复制以上代码保存为html 浏览器打开

3、网页设计中,当鼠标移过字体颜色会发生变化的效果怎么做啊

直接在CSS文件中添加一个定义链接就是了,在需要的地方调用,比如:

/*网站链接总的CSS定义:可定义内容为链接字体颜色、样式等*/

a{text-decoration: underline;} /*链接无下划线none,有为underline*/
a:link {color: #00007f;} /*未访问的链接 */
a:visited {color: #65038e;} /*已访问的链接*/
a:hover{color: #ff0000;} /*鼠标在链接上 */
a:active {color: #ff0000;} /*点击激活链接*/

4、网页制作中 当鼠标放在button按钮上时 按钮颜色改变 如何实现?

插入代码<button onmouseover="this.style.backgroundColor='red';" onmouseout="this.style.backgroundColor='';" >button</button>即可实现。

5、网页制作javascript鼠标经过文字变色问题

<style type="text/css">
body,td,th {
font-size: 18px;
color: #999;
font-weight: bold;
}

上面已经设置了td,th文字颜色属性,

<td width="62"><div align="center"><a href=page1.html style="color='#999';cursor:hand" onmouseover="javascript:this.style.color='red'" 
onmouseout="javascript:this.style.color='#999'">游戏介绍</a></div></td>

这里又设置了颜色属性,不过行内样式优先,可以改成style="color=blue;............",这时即:

<style type="text/css">
body,td,th {
font-size: 18px;
color: #999;
font-weight: bold;
}<td width="62"><div align="center"><a href=page1.html style="color='blue';cursor:hand" onmouseover="javascript:this.style.color='red'" 
onmouseout="javascript:this.style.color='#999'">游戏介绍</a></div></td>

这时颜色body,td,thcolor属性已经不起作用了也可以下面这样,去掉行内style="color:#999",行内的color属性去掉 前边color设置成你要的其实颜色。

<style type="text/css">
body,td,th {
font-size: 18px;
color: blue;
font-weight: bold;
}
<td width="62"><div align="center"><a href=page1.html style="cursor:hand" onmouseover="javascript:this.style.color='red'" 
onmouseout="javascript:this.style.color='#999'">游戏介绍</a></div></td>

有点乱,希望有帮助!

6、网页设计中如何让字体的颜色随着鼠标的移动或者鼠标经过字体时而改变?

样式表的运用

中添加代码
a:link
{
//鼠标未经过时也就是网页显示的颜色
color:darkgreen;
text-decoration:none;//不显示下划线
}
a:hover
{
//鼠标经过时也就是点击时颜色
color:red;
position:relative;
top:1px;
//鼠标经过时让链接的文字上移一像素(动态效果就在这)
text-decoration:none;
}
a:visited
{
//鼠标经过后也就是点击链接后的颜色
color:blue;
position:relative;
top:1px;
text-decoration:none;
}

7、DW制作网页导航栏如何设置鼠标经过时背景颜色会改变?

使用伪类 :hover{background-color:#f00;}
例如你要给一个div 标签设置鼠标悬浮上去改变背景,
css样式:
.box{background-color:#0f0;} //设置div的背景颜色
.box:hover{background-color:#f00;} //设置鼠标悬浮上去时的背景意思
html内容:
<div class="box">鼠标悬浮改变背景</div>

8、网页制作鼠标经过变色

<html>
<head><title>鼠标经过链接文字变色</title>
</head>
<body>
<a href=http://www.acbi.com.cn/ style="color='red';cursor:hand" onmouseover="javascript:this.style.color='yellow'"
onmouseout="javascript:this.style.color='red'">鼠标经过链接文字变色</a>
</body>
</html>

这个是鼠标经过文字时,文字变色的代码,希望能帮到你

9、网页制作中的--鼠标经过文字?

步骤:
1、打开dw软件,新建一个文档。
2、在dw当中,写入以下css样式:
<style>
.mengsb{width:648px;margin:0px auto ;}
.jixing1 a{ position:relative;width:320px;margin:0 0px 0 0;float:left;height:232px;}
.jixing1 li{width:320px;float:left;margin:2px;display:block;list-style:none;}
.jixing1 li img{width:320px}
.jixing1 a:hover{text-decoration:none;cursor:hand;}
.jixing1 a span{display:none;cursor:hand;text-align:center;color:#FFF;line-height:36px;padding:98px 0;font-weight:bold;}
.jixing1 a:hover span{width:320px;background:#000;display:block;position:absolute;bottom:0px;left:0;color:##FFF;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;align:center;}
</style>
3、然后在body当中加入以下图片,代码为:
<body>
<div class="mengsb">
<div class="jixing1"><li><a href="#"><img alt="河卵石" src="file:///C|/Users/Administrator/Desktop/20151221.jpg" /><span>物料花岗岩</span></a></li>
<li><a href="#"><img alt="河卵石" src="file:///C|/Users/Administrator/Desktop/2015122101.jpg" /><span>物料花岗岩</span></a></li>
</div></div>
</body>
4、在实时视图中看下最后的效果。
5、另外我们可以改变一些参数来实现不同的效果,我们可以换不同的背景颜色。
6、看下更改颜色后的效果

与网页设计鼠标经过文字变色相关的知识