前端html通过鼠标操作进行样式的更改

目标效果

第一种情况： 鼠标悬浮在上方，样式更改，鼠标离开后还原。css方式
第二种情况： 鼠标点击后，样式更改，鼠标松开后还原。css方式
第三种情况： 鼠标点击并松开后，样式更改。javascript方式
第四种情况： 鼠标点击后，样式更改，鼠标松开后样式不变。javascript方式
第五种情况： 鼠标点击并松开后，样式更改，鼠标离开后还原。javascript方式
第六种情况： 鼠标悬浮在上方，样式更改，鼠标离开后样式不变。javascript方式

代码

备注：email_black.png和email_white.png可以是任意两张不同的图片

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><style>//第一种情况.test1 {background-image: url(img/email_black.png);width: 50px;height: 50px;}.test1:hover {background-image: url(img/email_white.png);width: 50px;height: 50px;}//第二种情况.test2 {background-image: url(img/email_black.png);width: 50px;height: 50px;}.test2:active {background-image: url(img/email_white.png);width: 50px;height: 50px;}//第三种情况.test3 {background-image: url(img/email_black.png);width: 50px;height: 50px;}.test3-click {background-image: url(img/email_white.png);width: 50px;height: 50px;}//第四种情况.test4 {background-image: url(img/email_black.png);width: 50px;height: 50px;}.test4-hover {background-image: url(img/email_white.png);width: 50px;height: 50px;}//第五种情况.test5 {background-image: url(img/email_black.png);width: 50px;height: 50px;}.test5-active {background-image: url(img/email_white.png);width: 50px;height: 50px;}//第六种情况.test6 {background-image: url(img/email_black.png);width: 50px;height: 50px;}.test6-hover {background-image: url(img/email_white.png);width: 50px;height: 50px;}</style><body><div><div class="test1"></div><div class="test2"></div><div class="test3" id="test3" onclick="doclick()"></div><div class="test4" id="test4" onmousedown="domousedown_test4()"></div><div class="test5" id="test5" onmousedown="domousedown_test5()" onmouseout="domouseout_test5()"></div><div class="test6" id="test6" onmouseover="domouseover_test6()"></div></div></body><script>function doclick(){var elem = document.getElementById("test3");if(elem.getAttribute("class")=="test3"){elem.setAttribute("class","test3-click");}else{elem.setAttribute("class","test3");}}function domousedown_test4(){var elem = document.getElementById("test4");if(elem.getAttribute("class")=="test4"){elem.setAttribute("class","test4-hover");}else{elem.setAttribute("class","test4");}}function domouseout_test5(){var elem = document.getElementById("test5");elem.setAttribute("class","test5");}function domousedown_test5(){var elem = document.getElementById("test5");elem.setAttribute("class","test5-active");}function domouseover_test6(){var elem = document.getElementById("test6");if(elem.getAttribute("class")=="test6"){elem.setAttribute("class","test6-hover");}else{elem.setAttribute("class","test6");}}</script>
</html>

前端html通过鼠标操作进行样式的更改相关推荐

【css】自定义鼠标光标指针样式-前端
本文功能介绍:自定义.定制鼠标光标指针样式! cursor: url(), auto; 除了浏览器提供的鼠标样式,我们还可以借助 cursor: url() 的特性,即可实现定制自己的鼠标样式! /* ...
selenium对浏览器操作、鼠标操作等总结
1 控制浏览器 Selenium 主要提供的是操作页面上各种元素的方法,但它也提供了操作浏览器本身的方法,比如浏览器的大小以及浏览器后退.前进按钮等. 1.1 控制浏览器窗口大小在不同的浏览器大小下 ...
计算机鼠标样式,告诉你电脑如何更改鼠标的指针样式？
电脑现已成为我们工作.生活和娱乐必不可少的工具了,在使用电脑的过程中,可能会遇到电脑如何更改鼠标的指针样式?的问题,如果我们遇到了电脑如何更改鼠标的指针样式?的情况,该怎么处理怎么才能解决电脑如何更改 ...
HighGUI图像用户界面初步（滑动条、鼠标操作）
文章目录 1.Mat类简析 2.图像的载入:imread()函数 3.图像的显示:imshow()函数 4.创建窗口:namedWindow()函数 5.输出图像到文件:imwrite()函数 6.综 ...
利用Python模拟鼠标操作，一键将GIF文件载入CSDN的Markdown编辑器
简介: 讨论了在csdn的Markdown编译器中自动载入GIF文件的方法.使用了Python中的pyautogui软件包,可以通过Python的小程序实现一键将GIF文件载入CSDN的Markdo ...
Web前端学习第七天·fighting_CSS样式的编写和使用（二）
属性选择器目前使用的并不多.新浪和京东有使用. 可以根据元素的属性即属性值来选择元素. 单个属性时的语法:*[属性名称]{样式} 例如:(表示所有有href属性的标签) 1 <style ty ...
selenium自动化之鼠标操作
在做自动化测试的时候,经常会遇到这种情况,某个页面元素,你必须要把鼠标移动到上面才能显示出元素.那么这种情况,我们怎么处理呢?,selenium给我们提供了一个类来处理这类事件--ActionChai ...
怎样把做好的css样式改日期,Win8操作系统任务栏中日期样式怎么更改
Win8操作系统任务栏中日期样式怎么更改有些用户可能因为Win8系统的时钟与日期板式感到困惑,下面小编为大家带来一些办法,能帮大家改变Win8系统中的时钟与日期,使其变得更舒适,更多消息请关注应届毕 ...
opencv鼠标操作，画矩形
opencv鼠标操作,画矩形效果图主要两个函数在作用 //-------------------全局函数声明部分------------------------- //描述:全局函数的声明 //- ...

前端html通过鼠标操作进行样式的更改

前端html通过鼠标操作进行样式的更改

目标效果

代码

前端html通过鼠标操作进行样式的更改相关推荐

最新文章

热门文章