四时宝库

程序员的知识宝库

CSS:鼠标悬停在按钮上,文字加粗,但按钮宽度不变

用 HTML 在页面上放置了一个按钮

<button class="btn">点击按钮</button>

如果想要实现当鼠标悬停在按钮上时,按钮文字加粗,在 CSS 里这样设置

HTML实战篇:纯css制作二级横向以及竖向菜单导航

?本篇文章主要给大家介绍一下如何使用html+css完成二级横向以及竖向菜单导航制作;菜单导航是网站建设中最常用的一块了,基本每个网站内都会有个导航菜单,用鼠标划过还可以有下拉子菜单。

由上图我们可以看出,该图包含一个横向导航条,然后鼠标经过横向导航条之后,子导航显示出来。

1)制作页面所用知识点

鼠标事件改变css样式、选择器(css鼠标点击切换样式)

我们在很多时候其实是需要在网页中设置鼠标效果的,有些是自动生成的,比如一个link链接,那么鼠标移上去自动会变成一个手的样子去点击,有时候一个input输入框,那么鼠标就自动变成一个英文大写I的样子,那么我们是否可以将更多对象设置成我们需要的样子呢?这完全是可以的,接下来就看下效果吧

两款前端css样式库:鼠标悬停效果,满满的都是干货,效果看动图

ihover(效果好,样式多,圆形加正方形,一共35种样式)

imagehover(极简主义)

因为有两个链接,全部的话放不上来,下面只放一个ihover的下载链接(因为他更酷呀,哈哈哈)。需要的请自行下载

CSS中鼠标样式、文本框轮廓线、文本溢出等

1.鼠标样式

 <!-- 利用行内样式设置鼠标样式 -->    
<li style="cursor: default">鼠标默认样式</li>
<li style="cursor: move">鼠标移动样式</li>
<li style="cursor: pointer;">鼠标指针样式</li>
<li style="cursor: text;">鼠标文本样式</li>
<li style="cursor: wait;">鼠标等待样式</li>
<li style="cursor:zoom-in;">鼠标放大样式</li>
<li style="cursor: zoom-out;">鼠标缩小样式</li>

css鼠标特效(css鼠标样式大全)

<script type="text/javascript">

/* 鼠标特效 */

var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("?富强?","?民主?","?文明?","?和谐?","?自由?","?平等?","?公正?","?法治?","?爱国?","?敬业?","?诚信?","?友善?"); var $i = $("<span></span>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); });

CSS3之3D魔方鼠标控制酷炫效果(html魔方)

前面文章有制作水晶魔方,这次我们升级一下它的功能,通过鼠标控制魔方旋转。

大家先看效果

这酷炫的效果,你怎么看?

鼠标事件

这次效果,咱们需要用JS实现。主要是监听鼠标事件,计算鼠标滑动距离,改变魔方的rotateX、rotateY

css零基础自学教程(七)css链接样式,自定鼠标样式

一 css链接

链接可以使用任何css属性(例如,color,font-family,background等)来设置样式.

另外,链接的样式可以不同,具体取决于所处的状态.以下伪选择器可用:

a:link 定义正常的为访问链接的样式

CSS自定义鼠标指针样式(css设置鼠标指针的形状)

CSS自定义鼠标指针样式

CSS中的 cursor 属性可以用逗号分隔指定一系列的光标项,可以用 url() 来自定义光标的图案:

[css]

body {

cursor: url('some-cursor.ico'), default;

如何在CSS中自定义自己博客的鼠标样式?

今天来到天真网的朋友,可能会发现不一样的地方,那就是本站的鼠标样式换了。嘿嘿,这个是天真特意换的,毕竟默认的鼠标样式太死板不是!如果你也想和天真一样,想对自己博客的默认鼠标样式进行美化,那么请继续往下看吧!

第一步:大家要去找两个比较好看的鼠标指针(博客中一般也就是用到默认鼠标和点击链接的鼠标样式)。你也可以下载本站使用的,或者直接前往系统之家分享的1067个鼠标指针挑选(点此直达访问其他鼠标指针的样式)。

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接