css3 鼠标经过图片更换（CSS代码鼠标经过图片变换如何做）

本文目录

• CSS代码鼠标经过图片变换如何做
• css鼠标悬停图片更换
• CSS 一张图片作为的链接，如何实现鼠标放上去边框变色的效果
• CSS鼠标经过图片变亮,移开变变暗效果代码怎么写
• css鼠标经过图片切换效果在IE浏览器可以在火狐就没效果了呢，而且也不显示背景图片
• css可以做出鼠标滑过图片突出显示的效果么在电子杂志上看到过，觉得很好看可是网页上能实现吗
• css设置鼠标滑过事件时想更换背景图，为什么背景图片大小和文字的大小一样
• 怎么在css中定义导航中鼠标点击后背景图片改变为固定图片，点击另一个按钮时再恢复

CSS代码鼠标经过图片变换如何做

这样就搞定了。。。里面的图片位置你自己放了哟~~~
《img src="#" name="picture" width="330" height="210" border="0" align="middle"
onMouseOver="this.src=’#’" onMouseOut="this.src=’#’"》

css鼠标悬停图片更换

1、新建html文档。

2、准备好需要用到的图标。

3、书写hmtl代码。《div id="aaaa"》《ul》，《li》《img src="lanren01.jpg" width="218" height="155" /》《h3》成都康定理塘稻城亚丁然后说再见《/h3》《/li》。

4、书写css代码。《style》*{ margin:0; padding:0; list-style:none;}img{ border:0;}body{ background:#000;}；#aaaa{ width:460px; height:auto; margin:150px auto; overflow:hidden;}。

5、书写并添加js代码。《script src="jquery.min.js"》《/script》《script》$(function(){var imgs = $(’#aaaa li’);

6、代码整体结构。

CSS 一张图片作为的链接，如何实现鼠标放上去边框变色的效果

边框尽量用在a上，避免用在img上。 :hover伪类尽量用在a上，因为IE6不支持其他元素的hover伪类。hover意思就是鼠标移上去的动作。
不知道你有没有用reset来清理页面，毕竟各浏览器默认效果不一，因此我把reset的css也写了进去，第二部分为你想要的css。a标签要设定边框，一定要它把先转为块级元素，否则
他的高度不够，仅仅是行高。
《style type="text/css"》
/* 最简单的reset方式*/
* {margin:0; padding:0;}
img {border:none;}
/* 第二部分 给a标签定义一个类名，名字随意，将a转换为块级元素，并设定他的宽高和图片一样。*/
a.bor {display:block; width: 48px;height:64px;}
a.bor:hover {border:1px #F00 solid;}
《/style》
《!--下面是html代码部分--》
《a href="#" class=“bor”》
《img alt="" src="images/sp.jpg" /》
《/a》

CSS鼠标经过图片变亮,移开变变暗效果代码怎么写

1、打开hbuilder，在空白的html文件上面设置一个div，给div一个class并命名为img：

2、在css里设置img的类一定的宽和高，引入示例图片，设置图片为不重复。并且给img的类设置“:hover”伪类，设置伪类内的透明度为0.6：

3、打开浏览器，在浏览器内查看效果：

4、将鼠标移入图片，就会发现图片已经变亮了。以上就是用CSS设置鼠标经过图片变亮，移开变变暗效果的演示：

css鼠标经过图片切换效果在IE浏览器可以在火狐就没效果了呢，而且也不显示背景图片

　　您好！很高兴为您答疑！
属性缺少了，background里面-160这些都要加上单位才行
.new_bottom03{
width:110px; height:160px; float:left; margin-left:20px; padding:0;
}
.new_bottom03 a{
display:block; width:110px; height:160px;
　　您可以在火狐社区了解更多内容。希望我的回答对您有所帮助，如有疑问，欢迎继续在本平台咨询。

css可以做出鼠标滑过图片突出显示的效果么在电子杂志上看到过，觉得很好看可是网页上能实现吗

这个当然可以实现了，所谓突出显示效果跟滑动门的道理差不多，需要用到的是:hover
********************************************************
定义和用法
:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。
说明
这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。理论上，其他元素也可以处于悬停状态，不过 CSS 没有定义究竟是哪些元素。
激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接，它们会在支持 CSS 的浏览器中以不同的方式显示出来：
********************************************************
我不清楚你说的突出显示的效果，是不是图片变大。
如果是那样的话，可以《img class="big"》先定义一下，然后之后img.big:hover {width:多少px;height:多少px;}
就是把它置为顶层就可以了。具体的浮动什么的，依情况而定，写CSS熟悉以后很简单。
或者我觉得直接就可以用滑动门的办法，用两张图来替换就行。
《div id="header"》
《ul》
《li》《a href="#"》Home《/a》《/li》
《li id="current"》《a href="#"》News《/a》《/li》
《li》《a href="#"》Products《/a》《/li》
《li》《a href="#"》About《/a》《/li》
《li》《a href="#"》Contact《/a》《/li》
《/ul》
《/div》
#header {
float:left;
width:100%;
background:yellow;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:0;
list-style:none;
}
#header li {
float:left;
margin:0;
padding:0;
}
#header a {
display:block;
}
#header li {
float:left;
background:url("norm_right.gif")
no-repeat right top;
margin:0;
padding:0;
}
#header a {
display:block;
background:url("norm_left.gif")
no-repeat left top;
padding:5px 15px;
}
#header #current {
background-image:url("norm_right_on.gif");
}
#header #current a {
background-image:url("norm_left_on.gif");
}
嗯，你现在网上看一下滑动门的文章吧，我说的也不是很清楚，只是提供了一个思路，具体的看几个网页模板的代码相应的部分就可以理解了，嗯希望对你有帮助吧。

css设置鼠标滑过事件时想更换背景图，为什么背景图片大小和文字的大小一样

这个要满足的条件
你如果想鼠标滑过就变换图片和背景颜色这类功能的话，最少要有两个不一样的图片，图片要转换成块级元素display:block;，设置你需要的宽度和高度！文字的大小可以设置为font-size:像素;
不懂可以HI我哈！

怎么在css中定义导航中鼠标点击后背景图片改变为固定图片，点击另一个按钮时再恢复

鼠标点击为onclick事件，可以根据下面的方法来进行设置

1. 给改导航栏设置相应的点击事件onclick="a()"

2. 在js中写相应的方法，将该导航的背景替换掉 ；function a(){...}

3. 重复上面样式给每个按钮设置相应的点击事件，事件里更换背景即可