html怎么实现鼠标经过时显示按钮?

html怎么实现鼠标经过时显示按钮?,第1张

给按钮上绑定一个onclick事件,同时置一个状态值,状态值为true时显示按钮。

具体代码如下:

<html>

<head>

<script type="text/javascript" src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_f2fb5194.js"></script>

</head>

<body>

<button id="a">btn1</button>

<button id="b">btn2</button>

<script>

$(document).ready(function()

{

$("#a").click(function()

{

$("#a").hide()

})

$("#b").click(function()

{

$("#a").show()

}

)

})

</script>

</body>

</html>

1.创建一个新的HTML文件百,该文件被称为测试。标题是“CSS实现的鼠标在导航栏上显示的超链接的下划线效果”。

2.在页面上写nav标签,放入三个超链接(首页,第一栏,第二栏),代码如下。

3.运行代码,效果如下。

4.使用backCSS来美化字体大小、颜色和导航字体的排列。守则如下。

5.运行代码,效果如下:可见,经过CSS样式美化,当鼠标经过时,显示蓝色。

6.使用CSS代码,实现鼠标在上面显示下划线效果,代码如下。

7.在浏览器中运行代码以达到预期的效果。

1、准备切换图片素材,一般是两张,如图,放入img文件夹,跟HTML同级。

2、然后用img嵌入到网页,嵌入其中的一张,另外一张待会切换。

3、如图,现在是静态的,鼠标放上去也不会产生切换反应,因为没有用JS。

4、如图,获取img,转成JS对象,加个[0]就可以转js对象了。

5、然后设定经过事件,切换成另一张图片,这样就产生鼠标经过切换图片的效果了。

6、但是一旦鼠标离开了,就要切换回原来的图片素材,所以再加一个离开事件,这样离开后就变换成原来的图片。

7、如图,现在我的鼠标在图片上,就变成twopicture了。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/6212294.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-18
下一篇 2023-03-18

发表评论

登录后才能评论

评论列表(0条)

保存