精华内容
下载资源
问答
  • 如何设置鼠标悬停改变css样式

    千次阅读 2020-03-28 11:06:32
    设置鼠标悬停改变css样式: .a{ 原样式; } .a:hover{ 要改变的css样式; } 例如: span{ margin-left:10px; } span:hover{ margin-left:10px; color:red; } 效果 未悬停时: 悬停后; ....

    设置鼠标悬停改变css样式:

    .a{

    原样式;

    }

    .a:hover{

    要改变的css样式;

    }

     

    例如:

    span{
    	margin-left:10px;
    }
    span:hover{
    	margin-left:10px;
    	color:red;
    }

    效果

    未悬停时:

    悬停后;

     

     


     

     

    展开全文
  • 不能使用外部CSS样式实现hover鼠标悬停改变样式在DIV+CSS网页布局中,有时我们不能直接使用外部CSS样式控制DIV样式,比如对a设置a:hover样式。可以使用onMouseOver(鼠标移到目标上)和onMouseOut(鼠标移开目标后)实现...

    不能使用外部CSS样式实现hover鼠标悬停改变样式

    在DIV+CSS网页布局中,有时我们不能直接使用外部CSS样式控制DIV样式,比如对a设置a:hover样式。

    可以使用onMouseOver(鼠标移到目标上)和onMouseOut(鼠标移开目标后)实现对a标签或其它html标签设置hover样式。

    直接对标签使用即可,无论A标签、SPAN标签、DIV标签等均可。

    DIVCSS5

    以上对a超链接代码设置默认样式、鼠标移到目标上、鼠标移开目标后样式。特点代码比较长。

    DIVCSS5重要提示说明:为了看到鼠标移开后与默认样式相同,通常需要直接对标签使用style设置默认CSS样式并且与onMouseOut设置CSS样式保持相同。以免初始状态对象样式与鼠标移开对象后样式的不同。

    如上代码:

    style="color:#00F; text-decoration:none"

    onMouseOut="this.style.color='#00F';this.style.textDecoration='none'"

    设置默认字体颜色#00F与不显示下划线。

    通过常规hover与不用外部hover实现hover样式设置方法案例如下

    1、完整常规外部CSS案例展示代码:

    html>

    DIVCSS5实例

    .abc a{ color:#00F; text-decoration:none}

    /* 默认abc盒子里超链接文字字体颜色为蓝色 没有下划线 */

    .abc a:hover{ color:#F00; text-decoration:underline}

    /* 鼠标悬停abc盒子里超链接文字上后字体颜色为红色 出现下划线 */

    .bb{ color:#00F}

    .bb:hover{ color:#F00; font-weight:bold}

    /* 直接对bb对象盒子设置hover */

    欢迎访问DIVCSS5网站!

    展开全文
  • 不能使用外部CSS样式实现hover鼠标悬停改变样式 在DIV+CSS网页布局中,有时我们不能直接使用外部CSS样式控制DIV样式,比如对a设置a:hover样式。 可以使用onMouseOver(鼠标移到目标上)和onMouseOut(鼠标移开目标...

    不能使用外部CSS样式实现hover鼠标悬停改变样式

    在DIV+CSS网页布局中,有时我们不能直接使用外部CSS样式控制DIV样式,比如对a设置a:hover样式。

    可以使用onMouseOver(鼠标移到目标上)和onMouseOut(鼠标移开目标后)实现对a标签或其它html标签设置hover样式。

    直接对标签使用即可,无论A标签、SPAN标签、DIV标签等均可。

    <a href="http://www.jb51.net/" style="color:#00F; text-decoration:none" onMouseOver="this.style.color='#F00';this.style.textDecoration='underline'" onMouseOut="this.style.color='#00F';this.style.textDecoration='none'">jb51</a> 以上对a超链接代码设置默认样式、鼠标移到目标上、鼠标移开目标后样式。特点代码比较长。

    jb51.net重要提示说明:为了看到鼠标移开后与默认样式相同,通常需要直接对标签使用style设置默认CSS样式并且与onMouseOut设置CSS样式保持相同。以免初始状态对象样式与鼠标移开对象后样式的不同。

    如上代码:

    style="color:#00F; text-decoration:none"  与

    onMouseOut="this.style.color='#00F';this.style.textDecoration='none'" 设置默认字体颜色#00F与不显示下划线。

    通过常规hover与不用外部hover实现hover样式设置方法案例如下

    1、完整常规外部CSS案例展示代码:

    XML/HTML Code复制内容到剪贴板
    1.<!DOCTYPE html>   
    2.<html>   
    3.<head>   
    4.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    5.<title>jb51.net实例</title>   
    6.<style>   
    7..abc a{ color:#00F; text-decoration:none}   
    8./* 默认abc盒子里超链接文字字体颜色为蓝色 没有下划线 */   
    9.   
    10..abc a:hover{ color:#F00; text-decoration:underline}   
    11./* 鼠标悬停abc盒子里超链接文字上后字体颜色为红色 出现下划线 */   
    12.   
    13..bb{ color:#00F}   
    14..bb:hover{ color:#F00; font-weight:bold}   
    15./* 直接对bb对象盒子设置hover */   
    16.</style>   
    17.</head>   
    18.<body>   
    19.<div class="abc">   
    20.欢迎访问<a href="http://www.jb51.net/">jb51.net</a>网站!   
    21.</div>   
    22.   
    23.<div class="bb">   
    24.默认我是蓝色,鼠标悬停时变红色并加粗。   
    25.</div>   
    26.</body>   
    27.</html>   2、HTML代码与浏览器效果截图说明图
    默认与鼠标悬停浏览器测试效果截图

    3、外部CSS样式转换后HTML源代码

    XML/HTML Code复制内容到剪贴板
    1.<!DOCTYPE html>   
    2.<html>   
    3.<head>   
    4.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    5.<title>jb51.net实例</title>   
    6.</head>   
    7.<body>   
    8.<div class="abc">   
    9.欢迎访问   
    10.<a href="http://www.jb.com/"    
    11.style="color:#00F; text-decoration:none"    
    12.onMouseOver="this.style.color='#F00';this.style.textDecoration='underline'"    
    13.onMouseOut="this.style.color='#00F';this.style.textDecoration='none'">jb51.net</a>网站!   
    14.</div>   
    15.   
    16.<div style="color:#00F; font-weight:normal"   
    17.onMouseOver="this.style.color='#F00';this.style.fontWeight='bold'"   
    18.onMouseOut="this.style.color='#00F';this.style.fontWeight='normal'">   
    19.默认我是蓝色,鼠标悬停时变红色并加粗。   
    20.</div>   
    21.</body>   
    22.</html>  

    4、使用onMouseOver和onMouseOut实现外部CSS hover样式截图
    使用onMouseOver和onMouseOut实现外部CSS hover样式浏览器测试效果与说明截图

    5、特别说明:无论是a标签还是div标签、span标签、h1标签、p标签等都可以直接在标签内使用onMouseOver和onMouseOut实现鼠标悬停移到对象上与移开后样式变化。需要注意是,一般为了初始默认状态与鼠标移开后样式保存一致,需要对标签内加style属性设置CSS与onMouseOut(鼠标移开)设置样式CSS保存一致

     

    LESS 将 CSS 赋予了动态语言的特性,如 变量继承运算函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。

    展开全文
  • 原理:鼠标悬停在整个div上的时候,让所有li标签的背景颜色变为黑色,同时设置所有图片不透明度为50%,这样看起来所有图片上好像蒙上了一层阴影。 然后再给具体鼠标悬停的图片的不透明度设为100%即可实现我们想...
  • 在DIV+CSS网页布局中,有时我们不能直接使用外部CSS样式控制DIV样式,比如对a设置a:hover样式,可以使用onMouseOver和onMouseOut实现对a标签或其它html标签设置hover样式,需要的朋友可以参考下
  • 设置样式a:link { color: #06F; text-decoration: none; }/*未访问的链接*/a:visited { color: #999; text-decoration: line-through; }/*已访问的链接*/a:hover { color: #F00; text-decorat...

    设置样式

    a:link { color: #06F; text-decoration: none; }/* 未访问的链接 */
    a:visited { color: #999; text-decoration: line-through; } /* 已访问的链接 */
    a:hover { color: #F00; text-decoration: underline; }/* 鼠标移动到链接上 */
    a:active { color: #F0F; } /* 选定的链接 */
    展开全文
  • 鼠标悬停时为其他标签设置样式 <style type="text/css"> .a{ width:80px;height:24px;text-align:center;line-height:24px;background:red;} .a:hover a{color:#fff;text-decoration:none;}    <a href="#">...
  • 分别制作两套样式鼠标悬停(hover)和默认状态时 变深设置: .img{ filter: alpha(Opacity=60); opacity: 0.6; } .img:hover{ filter: alpha(Opacity=100); opacity: 1; } 变浅设置: .img{ ...
  • 方式一覆盖原有的样式(推荐)(如果没效果,请尝试清除浏览器缓存试试,大多框架静态样式都会在本地生成缓存,不清除修改不会生效)。新建一个CSS文件,该文件的加载顺序放后面就行,复制以下.../* 鼠标悬停行颜色 ...
  • 一、介绍 ...正常显示 ...(3) a:hover 鼠标处于鼠标悬停状态的链接样式 (4) a:active 当鼠标左键按下时,被激活(就是鼠标按下去那一瞬间)的链接样式。 三、实例介绍 前提:这里我们把a标签作为此...
  • 设置样式a { cursor:pointer;}
  • CSS鼠标悬停图片上图片变灰 变色 半透明 ...看到网页中的图片当鼠标移动到图片上时(鼠标悬停在图片上)图片变灰,看似变色变灰效果,实际是图片被CSS设置为半透明样式。 二、关键CSS代码: - TO
  • CSS设置链接的样式

    2020-06-11 09:35:00
    下面本篇文章就来给大家介绍一下CSS设置链接的样式的方法,希望对大家有所帮助。 在讨论CSS属性之前,先了解链接的状态是非常重要的。链接可以存在于不同的状态,并且可以使用伪类进行样式设置。 下面给出了四种...
  • 1. css 设置文字超出长度用省略号代替,下面四个...2.鼠标悬停显示全文title="全文全文全文全文全文全文全文";3.应用【 display:inline-block; 】后引起行内元素向下偏移添加样式:vertical-align: bott...
  • css如何设置超链接样式

    千次阅读 2013-11-22 12:20:06
    css设置超链接样式是通过伪类来实现的   (1) :link:设置a对象在未被访问前的样式表属性。 (2) :visited:设置a对象在其链接地址已被访问过时的样式表属性。 (3) :hover:设置对象在其鼠标悬停时的样式表属性。 (4)...
  • css 设置鼠标滑过变色效果

    千次阅读 2016-09-13 14:15:53
     当鼠标滑过或者悬停在图片上时,图片颜色变灰,看似是图片变灰变色效果,实际上是图片被设置为半透明样式 2.CSS样式代码:  (1)HTML代码:              业务流程        (2)css...
  • 鼠标悬停,按钮高光css的写法 可以通过把animation-fill-mode设置成forwards来实现。animation-fill-mode指定了在动画结束时元素的样式。你可以向这样设置它: animation-fill-mode: forwards; 设置button:hover的...
  • a:hover{样式} 鼠标悬停时的状态 a:visited{样式} 已访问过的状态(鼠标点击后的状态) a:active{样式} 鼠标点击时的状态 补充 input:focus{样式} 点击后鼠标移开保持鼠标点击时的状态 上述中的hover,active也适合...
  • 超链接样式 伪类名称 说明 示例 ...单击访问前的超链接样式 ...单击访问后的超链接样式 ...鼠标悬停其上的超链接样式 a:hover{ color: yellowgreen; } a:active 单击未释放的超链接样式 a:ac...
  • 最近公司做网页用到Bootstrap的菜单功能,要实现鼠标悬停显示二级菜单,于是就研究了一下,大概有两种方法。 第一种方法:修改样式表 实际上比较简单,只需要加一个css设置下hover的状态,把下拉菜单设置成block,...
  • css设置超链接样式是通过伪类来实现的 (1) :link:设置a对象在未被访问前的样式表属性。 (2) :visited:设置a对象在其链接地址已被访问过时的样式表属性。 (3) :hover:设置对象在其鼠标悬停时的样式表属性。 (4...
  • CSS样式

    2020-06-17 23:23:12
    CSS样式 css样式 内嵌样式: ...CSS添加方法: 在同一个文件夹中,使用文本编辑器编辑后保存为**.css格式 **,在网页中使用的时候需要在head标签中添加.css的链接。...a:hover:鼠标悬停; a:active:按下鼠标。
  • 8:CSS处理 CSS样式 css(name) 访问第一个匹配元素的样式属性。$("p").css("color"); css(properties) 把一个“名/值对”对象设置为所有匹配元素的样式属性。 ...
  • css中超级链接样式设置顺序

    千次阅读 2011-08-11 15:09:23
    a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 当有鼠标悬停在链接上 */ a:active {
  • CSS】a标签样式与div行距

    千次阅读 2015-10-09 17:03:52
    a标签,也就是超级链接,的样式问题,主要包括如果设置鼠标悬停到a标签上后变成手形的问题与a标签去掉下划线的问题。 虽然很简单,但是经常忘记。 一、a标签的手型问题 如何让鼠标悬停到a标签上后变成手形? a...
  • div中的img标签设置css样式 , 查看参考页面 div img { cursor: pointer; transition: all 0.5s; } div img:hover { transform: scale(1.1); }
  • 设置对象在其鼠标悬停时的样式表属性。 在CSS1中此伪类仅可用于a对象。且对于无href属性(特性)的a对象,此伪类 不发生作用。在CSS2中此伪类可以应用于任何对象。 目前IE5.5+仅支持CSS1中的:hover。 示例: a:...
  • 前端学习记录11-CSS-元素隐藏,鼠标样式,轮廓线,拖拽元素隐藏display(设置或检索对象是否以及如何显示)visibility(可见性)overflow(溢出or滚动条)使用隐藏来制作网页鼠标悬停出现播放按钮效果cursor(鼠标样式)...

空空如也

空空如也

1 2 3 4 5 ... 11
收藏数 218
精华内容 87
关键字:

css设置鼠标悬停样式