css鼠标点击切换图片(css鼠标经过图片切换)

http://www.itjxue.com  2023-02-02 18:03  来源:未知  点击次数: 

css+div问题,如何实现鼠标移上一个图片按钮使当前图片换成另外一个?

有3种方法,

一种是用css的a:hover来实现;

二用javascript函数,onmouseover=function();

三用按钮改为FLASH按钮;

css中如何定义鼠标经过改变图片,并且可以有链接点击

不用那么麻烦,活用a标签就可以了

style type="text/css"

a.home {background:url(鼠标滑过之前的图片地址) no-repeat; width:100px; height:20px; display:inline-block;_float:left;}

a.home:hover {background:url(鼠标滑过的图片地址) no-repeat;

/style

div

a href="" class="home"首页/a

/div

这样就可以实现有链接的可以换图的效果

css怎么设置鼠标变背景

CSS定义鼠标滑过导航菜单,背景可以是CSS定义的纯色,也可以是丰富色彩图案的图片,文字则是实实在在的,但它无法做到又酷又炫,但其优点是更利于搜索优化和CMS中使用。

来看一个简单实例,就是给a:hover(鼠标悬停)加一个背景颜色,如下图:

试下,鼠标移动到“导航菜单”文字上就可以看见黄色背景,移开鼠标又没有了,但是只有文字下面才有背景,不是想要的效果,选择显示方式为块,如图:

这样是不是就可以显示出一大块来了,但不规范,而且鼠标只有移动到文字上才会触发背景切换,可以给a标签一个宽高定义来实现,然后再去掉项目符号,定义li元素的宽高,文本纵横居中,这样是不是看上去就更美观了呢,如图:

当然,这只是个很简单的实例,以便制作出更完美的导航菜单来:

li标签的定义

行高与文字颜色设置

行高主要是相对于li元素来说,如果li元素的高度为30像素,那么设置30像素的行高文字正好横向居中。

背景设置

这里可设置也可以不用设置,关键在于文字是否带上超链,如果带超链,这里所设置的背景就无法看到,所以可以不用设置;但是如果文字没有带超链,这里的背景就有必要设置。

文本对齐和显示方式

文本对齐选择居中,也就是纵向居中,在导航菜单中横向和纵向文字都居中比较好看,显示方式最好选“块”,这样更利于视觉。

宽和高设置

宽度和高度的设置是让多个li元素的块显示更平均,更好看。

另外,假如编辑的导航菜单是横向导航,还需要将浮动设置成为左对齐,要是纵向导航就不需要设置了。

li a标签的设置

文字颜色和链接时的显示样式

文字颜色可以按自己喜欢的方式去选择,修饰我们选择无,因为超链在默认情况下是带下划线的,选择无也就没有下划线了。

背景设置

这里的背景是文字带上超链时的背景,可以是图片。

显示方式

显示方式我们也选择块,如图不选择块,那么背景只会显示文字下面那一小块,其他的都是默认的颜色。

宽高度与浮动设置

设置宽度和高度的好处是鼠标只要移到li元素块上就可以触发,如果没选,鼠标的触则需要移到带超链的文字上才会有效果。浮动可以不用设置。

li a:hover标签设置

字体颜色

这里设置的字体颜色只有当鼠标悬停时才会显示出来。

背景设置

同样,这里设置的背景颜色或者图片也是只有当鼠标悬停时才会表现出来。

css怎么实现点击切换图片

div class="gyyy"

img src="关于医院.jpg"

span关于医院/span

/div

$(function(){

var imgs=document.getElementsByName("img");

$(".gyyy").click(function(){

imgs.src="新图片的路径";

$(".gyyyspan").css("color","blue")

})

})

怎么用CSS或者JS实现鼠标点击变换背景图片?

img src="1.jpg" width="100" height="100" alt="" onclick="pf(this)"/

script type="text/javascript"

var arr = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];

function pf(t) {

t.src = arr[Math.floor(Math.random()*arr.length)];

}

script

如何用CSS实现鼠标移动到某张图片时变成另一张图片

style

.test{display:block;width:100px;height:100px;background:url(xxx.jpg)}

.test:hover{background:url(yyy.jpg)}

/style

a?class="test"?href="#"/a

也可以这样做:

a容器,,,b图片一,,,c图片二,,bc都定位在A里

a容器 c图片二{display:none;}

a容器:hover B图片一{display:none;}

a容器:hover c图片二{display:block;}

还有很多很多方法,,,

不过建议直接用JS来实现吧,,网上现成代码很多。。。

(责任编辑:IT教学网)

更多

推荐Oracle文章