鼠标滑过图片透明度的样式代码（鼠标滑过出现的图片）

今天给各位分享鼠标滑过图片透明度的样式代码的知识，其中也会对鼠标滑过出现的图片进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、Dreamweaver制作网页 鼠标经过图像出现文字 还是背景半透明的，怎么做？
• 2、淘宝装修很常见的地方，比如导航区，鼠标划过时改变颜色或者透明度，是如何做到的呢？
• 3、求助这段JS代码怎么简化，实现鼠标经过图片时透明度为1，离开时透明度为0.5
• 4、CSS 代码 鼠标经过透明度
• 5、flash2.0代码：当鼠标移向图片的时候，图片的透明度从0变到100，鼠标移开的时候透明度100变为0。
• 6、css+div 如何实现 鼠标经过图片是 半透明 移开 是不透明 （调用外部 样式表能实现吗？）

Dreamweaver制作网页 鼠标经过图像出现文字 还是背景半透明的，怎么做？

首先设置一个div对象，用CSS样式设置img为背景图片，同时设置隐藏a标签，然后在锚文本写下显示的文字，设置背景样式为半透明filter:alpha(opacity=60);-moz-opacity:0.5;opacity: 0.5;}，最后设置鼠标经过图片的时候才会显示文字内容。

所写代码为：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

html xmlns="

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title鼠标放图片上时出现文字/title 

style 

.fm{ position:relative;width:150px; height:150px;margin:0 auto} /*设置div的相对定位，宽高居中*/

.fm span,a{display:none;text-decoration:none;}/*隐藏文字,去掉下划线样式*/

.fm:hover a.mm{ position:absolute; top:0; width:100%; height:100%;

 z-index:100; left:0; display:block;}/*设置绝对定位*/

.fm:hover span{ display:block;position:absolute; bottom:0; left:0;color:#CCCCCC;width:150px;z-index:10;height:25px; line-height:25px; background:#000;filter:alpha(opacity=60);-moz-opacity:0.5;opacity: 0.5;}

/* 设置显示文字定位位置，标签宽度与对象宽度相同，设置一定高度，设置css背景为半透明背景颜色。 */ 

/style 

/head 

body 

div class="fm" style="background:url(123/2.png)"

    span我是一只开心的肥猫/span

a href="#" class="mm"nbsp;/a

/div 

/div 

/body 

/html

浏览效果图为：

以上就是用Dreamweaver制作出鼠标经过图像出现文，背景半透明的效果。

淘宝装修很常见的地方，比如导航区，鼠标划过时改变颜色或者透明度，是如何做到的呢？

请先说明你的店铺装修是哪种

如果是普通旺铺。那是做不到的

前提：支持自定义CSS ，才可以实现你说的那种

只有3中情况支持：

1、旺铺旗舰版（这种需要两千多元一年，按年收的）

2、旗舰店（tmall的，这种不用我说了吧）

3、普通旺铺，买模板。找设计师帮你开通自定义CSS也可以（这种相对较便宜。不过需要找愿意帮你开通的设计师才行。有的卖模板不一定愿意帮你开通这个自定义css功能）

如果开通了自定义css，只要用css中的hover 就可以实现了

类如：

[html部分]

a href="#" title="按钮" class="mybtn"这个是一个按钮/a

[css部分]

.mybtn{color:#ffffff;background-image:url(按钮默认图片地址);width:100px;height:30px;}

.mybtn:hover{color:red;background-image:url(按钮改变的图片地址);}

所以第一个你要先确定你店铺装修是哪种。

上述内容希望对你有所帮助。

求助这段JS代码怎么简化，实现鼠标经过图片时透明度为1，离开时透明度为0.5

楼上那个也可以。

下面说的是纯JS 如果你图片很多会比上面的方便

1将图片所用变量 弄成一个数组，

var yiguitu1;

var myarry=[];

for(var i=0;in;i++){

    var j=yiguitu1+i;

    myarry.push(j);

};

2.将你需要的事件做成for循环

foreach(m in myarry){

    m.onmouseover=function(m){

        m.style.opacity=1;

    }

    m.onmouseout=function(m){

        m.style.opacity=0.5;

    }

}

CSS 代码 鼠标经过透明度

将样式写在css里。不要写在img标签里。同样，在外部写js,,我写的是jquery的。css如下：

style type="text/css"

img {opacity:0.4;filter:alpha(opacity=40);}

/style

将这个保存为layout.css。在html里如下调用

link rel="stylesheet" type="text/css" href="../layout.css"

也可以不用css，将下面js代码里我注释掉的那一行取消注释，跟用css的效果一样。

js如下：

script type="text/script"

$(function(){

//$("img").css("opacity","0.4");

$("img").hover(function(){

$(this).css("opacity","1");

},

function(){

$(this).css("opacity","0.4");

})

})

/script

将这个js保存为imghover.js。然后再html里如下调用

script src="。。/jquery-1.4.2.min.js" type="text/javascript"/script//自己下一个jquery-1.4.2.min.js。

script src="。。/imghover.js" type="text/javascript"/script

flash2.0代码：当鼠标移向图片的时候，图片的透明度从0变到100，鼠标移开的时候透明度100变为0。

把这个图片转换成影片剪辑，然后右键它，选择动作，加如下代码：

onClipEvent(load)

{

this._alpha=0;

}

on(rollOver)

{

this.onEnterFrame=function()

{

if(this._alpha100)

{

this._alpha+=10;

}

else

{

this.onEnterFrame=null;

}

}

}

on(rollOut)

{

this.onEnterFrame=function()

{

if(this._alpha0)

{

this._alpha-=10;

}

else

{

this.onEnterFrame=null;

}

}

}

css+div 如何实现 鼠标经过图片是 半透明 移开 是不透明 （调用外部 样式表能实现吗？）

不要用滤镜，滤镜很多浏览器都不兼容，建议你还是用图片设为背景代替

用ps制作一个尺寸为1px*1px大小的半透明png格式的图片设为背景平铺作为鼠标经过的效果，默认不透明的就直接用背景色代替就行了

注：png半透明图片目前只有IE6无法直接兼容，不过现在大部分人的电脑应该都不用IE6了吧，不过如果非要兼容的话，我百度空间有解决png透明问题的文章，你可以去看看

鼠标滑过图片透明度的样式代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于鼠标滑过出现的图片、鼠标滑过图片透明度的样式代码的信息别忘了在本站进行查找喔。